Question

我有一个带有网格布局的模态，因为我将标签放在每个字段上方。这主要是有效的，但它们填满整个模态，直到左/右边缘。我似乎没有bootstrap site的演示版本的问题，但这些是文本字段而不是标记。我玩过表格控制课，但这似乎让事情变得更糟。有没有我失踪的课程？

这是我的代码的JSfiddle：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">&times;</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>

Answer 1

从.row https://jsfiddle.net/jdnag6zx/1/

中删除.modal-body个班级

Answer 2

这是一种更好的方法！

<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">&times;</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>

Answer 3

使用bootstrap table代替cols检查此fiddle

Bootstrap模态网格布局缺少填充

3 个答案: