Bootstrap 模态网格布局缺少填充答案

【问题标题】：Bootstrap modal grid layout missing paddingBootstrap 模态网格布局缺少填充
【发布时间】：2017-04-24 20:08:10
【问题描述】：

我有一个带有网格布局的模式，因为我将标签放在每个字段上方。这主要是可行的，但它们会填充整个模态，一直到左/右边缘。 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>

【问题讨论】：

不确定你想完成什么，但我最好的办法是：jsfiddle.net/jdnag6zx/4

标签： javascript jquery css twitter-bootstrap bootstrap-modal

【解决方案1】：

从 .modal-body https://jsfiddle.net/jdnag6zx/1/ 中删除 .row 类

【讨论】：

【解决方案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>

【讨论】：

有正确的方法。您希望您的类是语义和结构更改应该保留给
标记，并将其用作和的容器
是的，Michael Coker 或 LXhelili 的方法都有效。当布局大小发生变化时，LXhelili 的效果更好:)。非常感谢你们！

【解决方案3】：

使用bootstrap table 而不是cols 检查此fiddle

【讨论】：