我有一个带有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>
第一个标签页的大小:
第二个标签的大小:
最佳答案
请参阅“我现在更新了我的代码”,它将按您的意愿工作。
下面给出的结帐代码可以解决您的问题。
如果要根据屏幕的宽度更改模态的宽度,请使用@media
提供的CSS
查询
.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">×</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>