修复其中所有选项卡的引导模式内容大小答案

【问题标题】：Fix bootstrap modal content size for all Tab of in it修复其中所有选项卡的引导模式内容大小
【发布时间】：2017-01-25 11:25:14
【问题描述】：

我有一个带有 3 个选项卡的引导模式。每个选项卡的模态内容的大小都不同。我想修复所有选项卡的模式内容。我必须做什么？

我的代码：

<ul id="EditTabs" class="nav nav-tabs " role="tablist">
    <li  class="active">
        <a href="#first" role="tab" data-toggle="tab">
            <icon class="fa fa-user" ></icon> مشخصات
        </a>
    </li>
    <li id="ImageEditLiTab">
        <a href="#second" role="tab" data-toggle="tab">
            <i class="fa fa-picture-o"></i> عکس
        </a>
    </li>
    <li id="LiGoogleMapEditThird">
        <a href="#third" role="tab" data-toggle="tab">
            <i class="glyphicon glyphicon-map-marker"></i> نقشه
        </a>
    </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane fade active in" id="first">

        <!--------- end input texts-------------->
        <br>
        <!-- Text input-->

        <div  class="form-group">
            <div class="col-md-8  inputGroupContainer">
                <div  dir="ltr" class="input-group">
                    <input dir="rtl" id="EditStudentFirstName"  name="EditStudentFirstName" placeholder="نام" class="form-control"  type="text">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                </div>
            </div>
            <label for="EditStudentFirstName" class="col-md-3 control-label">نام           </label>
        </div>

        <!-- Text input-->

        <div  class="form-group">
            <div class="col-md-8 inputGroupContainer">
                <div dir="ltr" class="input-group">
                    <input dir="rtl" id="EditStudentLastName" name="EditStudentLastName" placeholder="نام خانوادگی" class="form-control"  type="text">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                </div>
            </div>
            <label for="EditStudentLastName" class="col-md-3 control-label" >نام خانوادگی         </label>
        </div>

        <!-- Text input-->

        <div class="form-group">
            <div class="col-md-8 inputGroupContainer">
                <div dir="ltr" class="input-group">
                    <input dir="rtl" id="EditStudentAddress" name="EditStudentAddress" placeholder="آدرس" class="form-control" type="text">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                </div>
            </div>
            <label for="EditStudentAddress" class="col-md-3 control-label">آدرس منزل       </label>
        </div>

        <!-- Text input-->
        <div  class="form-group">

            <div class="col-md-8 inputGroupContainer">
                <div dir="ltr" class="input-group">
                    <input dir="rtl" id="EditStudentZip" name="EditStudentZip" placeholder="کد پستی" class="form-control"  type="text">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                </div>
            </div>
            <label for="EditStudentZip" class="col-md-3 control-label">کد پستی   </label>
        </div>

        <!-- Text input-->
        <div  class="form-group">

            <div class="col-md-8 inputGroupContainer">
                <div dir="ltr" class="input-group">
                    <input dir="rtl" id="EditStudentPhone" name="EditStudentPhone" placeholder=" شماره تلفن منزل" class="form-control"  type="text">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-phone-alt"></i></span>
                </div>
            </div>
            <label for="EditStudentPhone" class="col-md-3 control-label">شماره تلفن منزل  </label>
        </div>

        <!-- Text input-->
        <div  class="form-group">
            <div class="col-md-8 inputGroupContainer">
                <div dir="ltr" class="input-group">
                    <input dir="rtl" id="EditStudentMobile" name="EditStudentMobile" placeholder="شماره موبایل" class="form-control"  type="text">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
                </div>
            </div>
            <label for="EditStudentMobile" class="col-md-3 control-label">شماره موبایل   </label>
        </div>


        <!-- Text input-->
        <div  class="form-group">
            <div class="col-md-8 inputGroupContainer">
                <div dir="ltr" class="input-group">
                    <input dir="rtl" id="EditStudentUsername" name="EditStudentUsername" placeholder="نام کاربری دانش آموز" class="form-control"  type="text">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                </div>
            </div>
            <label for="EditStudentUsername" class="col-md-3 control-label">نام کاربری دانش آموز        </label>
        </div>

        <!-- Text input-->
        <div  class="form-group">
            <div class="col-md-8 inputGroupContainer">
                <div dir="ltr" class="input-group">
                    <input dir="rtl" id="EditStudentPass" name="EditStudentPass" placeholder="پسورد دانش آموز" class="form-control"  type="text">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                </div>
            </div>
            <label for="EditStudentPass" class="col-md-3 control-label">پسورد دانش آموز   </label>
        </div>

        <!--------- end input texts-------------->

    </div><!-- End first Tab-->
    <div class="tab-pane fade" id="second" dir="ltr">

        <form id="imagesubmit2" action="http://79.132.212.50:8080/SchoolServiceWebService/user/photo/set" method="post" enctype="multipart/form-data">

            <input id="Adminusername2"  hidden type="textbox" name="username" size="45" />
            <input id="Adminuserpassword2" hidden type="textbox" name="password" size="45" />
            <input id="EditStudentuserid"  hidden  type="textbox" name="userid" size="45" />
            <!--  <input id="file-4" type="file" class="file" size="45" data-upload-url="http://79.132.212.50:8080/SchoolServiceWebService/user/photo/set">-->

           <!--  <input id="file-4" type="file" name="file" size="45" class="file col-md-6 file2" />-->

            <input id="input-24" name="file" type="file" multiple size="45"   class="file-loading col-md-6 file2">

        </form>

    </div><!-- End second Tab-->


    <div class="tab-pane fade" id="third">

        <br>
        <br>
        <br>
        <label for="Updateaddress_with_google">آدرس را بر روی نقشه مشخص کنید</label>

        <div class="span11">
            <div id="UpdateMap"></div>
        </div>
        <br>
        <br>
        <div class="row">

            <div class="col-md-4">
                <button id="Updatebutton_Google_Serach" type="button" class="btn btn-info" >جستجو</button>
            </div>
            <div class="col-md-8">
                <input  type="text" id="Updateaddress_with_google" name="Updateaddress_with_google" placeholder="جستجو" class="form-control" />
            </div>

        </div>

        <input type="text" hidden id="UpdatelatGoogleMap">
        <input type="text" hidden id="UpdatelngGoogleMap">
        <br>
    </div><!-- End third Tab-->

</div>

第一个标签的大小：第二个标签的大小：

【问题讨论】：

制作一个 jsfiddle 或 sn-p...
您在第一个选项卡中使用 col-md-8，但在第二个选项卡中没有使用任何 col，因此 boostrap 的填充不适用
尝试使用 .custom-class-assignedto-modal .modal-dialog {width: 90%;}

标签： jquery html css tabs bootstrap-modal

【解决方案1】：

请参阅我已经更新了我的代码，现在它可以按照您的需要运行。

下面给出的结帐代码可能会解决您的问题。如果您想根据屏幕宽度更改模态宽度，请使用@mediaCSS提供的查询

.custom-class-assignedto-modal .modal-dialog {
  width: 50%;
}
.custom-class-assignedto-modal .modal-body {
  height: 400px;
  overflow : auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade custom-class-assignedto-modal" id="myModal" role="dialog" align="center">
      <div class="modal-dialog" align="left">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
            <ul id="EditTabs" class="nav nav-tabs " role="tablist">
              <li class="active">
                <a href="#first" role="tab" data-toggle="tab">
                  <icon class="fa fa-user"></icon>مشخصات
                </a>
              </li>
              <li id="ImageEditLiTab">
                <a href="#second" role="tab" data-toggle="tab">
                  <i class="fa fa-picture-o"></i> عکس
                </a>
              </li>
              <li id="LiGoogleMapEditThird">
                <a href="#third" role="tab" data-toggle="tab">
                  <i class="glyphicon glyphicon-map-marker"></i> نقشه
                </a>
              </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
              <div class="tab-pane fade active in" id="first">

                <!--------- end input texts-------------->
                <br>
                <!-- Text input-->

                <div class="form-group">
                  <div class="col-md-8  inputGroupContainer">
                    <div dir="ltr" class="input-group">
                      <input dir="rtl" id="EditStudentFirstName" name="EditStudentFirstName" placeholder="نام" class="form-control" type="text">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    </div>
                  </div>
                  <label for="EditStudentFirstName" class="col-md-3 control-label">نام</label>
                </div>

                <!-- Text input-->

                <div class="form-group">
                  <div class="col-md-8 inputGroupContainer">
                    <div dir="ltr" class="input-group">
                      <input dir="rtl" id="EditStudentLastName" name="EditStudentLastName" placeholder="نام خانوادگی" class="form-control" type="text">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    </div>
                  </div>
                  <label for="EditStudentLastName" class="col-md-3 control-label">نام خانوادگی</label>
                </div>

                <!-- Text input-->

                <div class="form-group">
                  <div class="col-md-8 inputGroupContainer">
                    <div dir="ltr" class="input-group">
                      <input dir="rtl" id="EditStudentAddress" name="EditStudentAddress" placeholder="آدرس" class="form-control" type="text">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                    </div>
                  </div>
                  <label for="EditStudentAddress" class="col-md-3 control-label">آدرس منزل</label>
                </div>

                <!-- Text input-->
                <div class="form-group">

                  <div class="col-md-8 inputGroupContainer">
                    <div dir="ltr" class="input-group">
                      <input dir="rtl" id="EditStudentZip" name="EditStudentZip" placeholder="کد پستی" class="form-control" type="text">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                    </div>
                  </div>
                  <label for="EditStudentZip" class="col-md-3 control-label">کد پستی</label>
                </div>

                <!-- Text input-->
                <div class="form-group">

                  <div class="col-md-8 inputGroupContainer">
                    <div dir="ltr" class="input-group">
                      <input dir="rtl" id="EditStudentPhone" name="EditStudentPhone" placeholder=" شماره تلفن منزل" class="form-control" type="text">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-phone-alt"></i></span>
                    </div>
                  </div>
                  <label for="EditStudentPhone" class="col-md-3 control-label">شماره تلفن منزل</label>
                </div>

                <!-- Text input-->
                <div class="form-group">
                  <div class="col-md-8 inputGroupContainer">
                    <div dir="ltr" class="input-group">
                      <input dir="rtl" id="EditStudentMobile" name="EditStudentMobile" placeholder="شماره موبایل" class="form-control" type="text">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
                    </div>
                  </div>
                  <label for="EditStudentMobile" class="col-md-3 control-label">شماره موبایل</label>
                </div>


                <!-- Text input-->
                <div class="form-group">
                  <div class="col-md-8 inputGroupContainer">
                    <div dir="ltr" class="input-group">
                      <input dir="rtl" id="EditStudentUsername" name="EditStudentUsername" placeholder="نام کاربری دانش آموز" class="form-control" type="text">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    </div>
                  </div>
                  <label for="EditStudentUsername" class="col-md-3 control-label">نام کاربری دانش آموز</label>
                </div>

                <!-- Text input-->
                <div class="form-group">
                  <div class="col-md-8 inputGroupContainer">
                    <div dir="ltr" class="input-group">
                      <input dir="rtl" id="EditStudentPass" name="EditStudentPass" placeholder="پسورد دانش آموز" class="form-control" type="text">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    </div>
                  </div>
                  <label for="EditStudentPass" class="col-md-3 control-label">پسورد دانش آموز</label>
                </div>

                <!--------- end input texts-------------->

              </div>
              <!-- End first Tab-->
              <div class="tab-pane fade" id="second" dir="ltr">

                <form id="imagesubmit2" action="http://79.132.212.50:8080/SchoolServiceWebService/user/photo/set" method="post" enctype="multipart/form-data">

                  <input id="Adminusername2" hidden type="textbox" name="username" size="45" />
                  <input id="Adminuserpassword2" hidden type="textbox" name="password" size="45" />
                  <input id="EditStudentuserid" hidden type="textbox" name="userid" size="45" />
                  <!--  <input id="file-4" type="file" class="file" size="45" data-upload-url="http://79.132.212.50:8080/SchoolServiceWebService/user/photo/set">-->

                  <!--  <input id="file-4" type="file" name="file" size="45" class="file col-md-6 file2" />-->

                  <input id="input-24" name="file" type="file" multiple size="45" class="file-loading col-md-6 file2">

                </form>

              </div>
              <!-- End second Tab-->


              <div class="tab-pane fade" id="third">

                <br>
                <br>
                <br>
                <label for="Updateaddress_with_google">آدرس را بر روی نقشه مشخص کنید</label>

                <div class="span11">
                  <div id="UpdateMap"></div>
                </div>
                <br>
                <br>
                <div class="row">

                  <div class="col-md-4">
                    <button id="Updatebutton_Google_Serach" type="button" class="btn btn-info">جستجو</button>
                  </div>
                  <div class="col-md-8">
                    <input type="text" id="Updateaddress_with_google" name="Updateaddress_with_google" placeholder="جستجو" class="form-control" />
                  </div>

                </div>

                <input type="text" hidden id="UpdatelatGoogleMap">
                <input type="text" hidden id="UpdatelngGoogleMap">
                <br>
              </div>
              <!-- End third Tab-->

            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>

  </div>




</body>

</html>

【讨论】：