Question

包含select元素的列旁边的按钮似乎有一些额外的边距。在我的实际网站上，似乎是额外的正余量，而在CodePen上，它似乎是负面的。

我怀疑他们是同样的问题，尽管有标记。这是CodePen演示：http://codepen.io/anon/pen/gabZMo?editors=100

<div class="row">
  <div class="form-horizontal col-md-6">
    <div class="form-group">
      <div class="col-sm-8">
        <select class="form-control">...</select>
      </div>
      <button class="btn btn-default col-sm-4">New Event</button>
    </div>
    <button class="btn btn-primary btn-block">Free Quote</button>
  </div>
</div>

我查看了Bootstrap文档，这个应该是正确的标记。我也尝试将button包装在自己的列中，但这并没有改变任何东西。

Answer 1

您有3个选项可以解决问题，

将<button class="btn btn-primary btn-block">Free Quote</button>放在<div class="form-group"></div>

中

按钮向左推的原因是因为col-sm-4选择器左右填充15px被btn-default选择器padding: 6px 12px;

覆盖

因此添加自定义选择器custom-margin并定义自定义CSS

1 HTML

<div class="row">
    <div class="form-horizontal col-md-6">
        <div class="form-group">
            <div class="col-sm-8">
                <select class="form-control">...</select>
            </div>
            <button class="btn btn-default col-sm-4 custom-margin">New Event</button>
        </div>
        <div class="form-group">
            <button class="btn btn-primary btn-block">Free Quote</button>
        </div>
    </div>
</div>

Fiddle 1

2 HTML

<div class="row">
    <div class="form-horizontal col-md-6">
        <div class="form-group">
            <div class="col-sm-8">
                <select class="form-control">...</select>
            </div>
            <button class="btn btn-default col-sm-4 custom-margin">New Event</button>
            <button class="btn btn-primary btn-block">Free Quote</button>
        </div>
    </div>
</div>

Fiddle 2

或者做得对吗

3 HTML

<div class="row">
    <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-8">
                    <div class="form-group">
                        <select class="form-control">...</select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <button class="btn btn-default btn-block">New Event</button>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <button class="btn btn-primary btn-block">Free Quote</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

Fiddle 3

Answer 2

您不想直接在按钮上使用col-sm-4。将btn-block放在按钮上并将其粘贴在col-sm-4 div中，如下所示：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="form-horizontal col-md-6">
    <div class="form-group">
      <div class="col-xs-8">
        <select class="form-control">
          <option value="1">Test Event</option>
          <option value="7">Test Event 2: The Re-testening</option>
        </select>
      </div>
      <div class="col-xs-4">
        <button class="btn btn-default btn-block">New Event</button>
      </div>
    </div>
    <button class="btn btn-primary btn-block">Free Quote</button>
  </div>
</div>

Bootstrap水平表单具有额外的边距

2 个答案: