Question

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

当我看到萤火虫的页脚时，它似乎占据了模态形式的一半。我是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

您错过了表单标记，并且由于您的标签和输入都在列中，因此您还需要为表单提供一个表格水平类。这是一个如何使用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>

Answer 2

只需在.btn类中添加一个margin-top：5px。但是，如果你像我一样挑剔，我不会修改Bootstrap，这样你就可以在发布更新时随时更新它。

而是将类分开映射到样式表中，并使用已经为您声明的类

.modal-footer .btn{
     margin-top: 5px; /* I think 15px looks way better */
 }

您可能/可能不必添加！重要的黑客

引导模式窗体上的间距问题

2 个答案: