css - Bootstrap 模态形式上的间距问题

Question

我创建了一个 Bootstrap 模式表单，其中包含一些用户可以编辑的字段。但是页脚紧贴最后一个字段，因此表单和按钮之间没有空隙。

当我在 firebug 中查看页脚时，它似乎占据了模态形式的一半。我是 css 的新手，我不知道为什么会这样

表单代码如下:

<a data-toggle="modal" href="#myEditModal" class="btn btn-primary btn-lg">Launch demo     modal</a>


<!-- Modal -->
<div class="modal fade" id="myEditModal" tabindex="-1" role="dialog"    aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">

               <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">Name</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="name" name="name" placeholder="Company" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="street" class="col-sm-2 control-label">Street</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="street" name="street" placeholder="Street" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="number" class="col-sm-2 control-label">Number</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="number" name="number" placeholder="Number" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="zipcode" class="col-sm-2 control-label">ZIP Code</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="zipcode" name="zipcode" placeholder="ZIP Code" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="city" class="col-sm-2 control-label">City</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="city" name="city" placeholder="City" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="country" class="col-sm-2 control-label">Country</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="country" name="country" placeholder="Country" type="text">
                    </div>
               </div>               
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

我也在 bootply 上复制了表格

http://www.bootply.com/126859

我只想引入 5px 左右的边距，如果有人能指出我的错误那就太好了

谢谢

JaChNo

Answer 1

您缺少 form 标记，并且由于您在列中有标签和输入，看起来您还需要为表单提供一个 form-horizo​​ntal 类。以下是如何使用 Bootstrap 构建水平表单的示例的链接:http://getbootstrap.com/css/#forms-horizontal

我更新了你的代码，这应该可以在不添加任何 CSS 的情况下工作:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="name" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" name="name" placeholder="Company">
            </div>
          </div>
          <div class="form-group">
              <label for="street" class="col-sm-2 control-label">Street</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="street" name="street" placeholder="Street">
              </div>
          </div>
          <div class="form-group">
              <label for="number" class="col-sm-2 control-label">Number</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="number" name="number" placeholder="Number">
              </div>
          </div>
          <div class="form-group">
              <label for="zipcode" class="col-sm-2 control-label">ZIP Code</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="zipcode" name="zipcode" placeholder="ZIP Code">
              </div>
          </div>
          <div class="form-group">
              <label for="city" class="col-sm-2 control-label">City</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="city" name="city" placeholder="City">
              </div>
          </div>
          <div class="form-group">
              <label for="country" class="col-sm-2 control-label">Country</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="country" name="country" placeholder="Country">
              </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>