Bootstrap modal grid layout missing padding
Question
I've got a modal with a grid layout because I put the labels above each field. That mostly works but they fill the entire Modal running right up to the left/right edges. I don't seem to have that trouble with the demo from the bootstrap site but those are text fields instead of and tags. I played around with the form-control class but that seemed to make matters worse. Is there a class I'm missing?
Here's a JSfiddle of my code: https://jsfiddle.net/jdnag6zx/
<!DOCTYPE html>
<html>
<!--https://jsfiddle.net/jdnag6zx/-->
<head>
<title>Bootstrap 3</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<a href="#dates" class = "btn btn-default" data-toggle="modal">Dates</a>
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<label for="column-type" class="col-lg-4 control-label">Date</label>
<label for="column-type" class="col-lg-4 control-label">Separator</label>
<label for="column-type" class="col-lg-4 control-label">Example</label>
</div>
<div class="row">
<select class="col-lg-4" id="date-format" >
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
<select class="col-lg-4" id="date-separator">
<option>/</option>
<option>-</option>
</select>
<input class="col-lg-4" id="date-example" value="1-1-2017"></input>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary pull-right" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-success fcvt-btn-save" ng-click="onSubmit()">Continue</a>
</div>
</form>
</div>
</div>
</div>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
3 answers
solution1
1 2017-02-16 18:49:15
从.modal-body https://jsfiddle.net/jdnag6zx/1/删除.row类
solution2
0 2017-02-16 21:27:55
This is a better approach!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <a href="#dates" class="btn btn-default" data-toggle="modal">Dates</a> <div id="dates" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <form class="form-horizontal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4>New Map</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-4"> <label for="column-type" class="control-label">Date</label> <select class="form-control" id="date-format"> <option>1/1/2017</option> <option>2/1/2017</option> <option>3/1/2017</option> </select> </div> <div class="col-sm-4"> <label for="column-type" class="control-label">Separator</label> <select class="form-control" id="date-separator"> <option>/</option> <option>-</option> </select> </div> <div class="col-sm-4"> <label for="column-type" class="control-label">Example</label> <input class="form-control" id="date-example" value="1-1-2017" /> </div> </div> </div> <div class="modal-footer"> <a href="#" class="btn btn-primary pull-right" data-dismiss="modal">Close</a> <a href="#" class="btn btn-success fcvt-btn-save" ng-click="onSubmit()">Continue</a> </div> </form> </div> </div> </div>
solution3
0 2017-04-24 12:08:10
使用bootstrap table而不是cols检查此小提琴
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Remove all padding from bootstrap modal
Packery Grid Layout - Problems with border/padding and overlay
adjust padding to center page using grid layout
broken bootstrap grid layout in reactjs
Bootstrap Modal on clicking a link on UI Grid
Bootstrap Modal don't open in photo grid
Angular JS ui-grid on Bootstrap modal
Bootstrap modal on html element append missing css
Angular NGX Bootstrap Modal - content is missing
Unexpected margin and padding on bootstrap modal show with sticky-top class
Related Tags