css - 如何使用 Bootstrap 3 将所有这些都放在一行中？

Question

我在这里所做的是使用 .row 下的 .col-md-5 和 .col-md-7 的标准 Bootstrap 网格系统将所有元素放在 1 行上，但我似乎无法使其工作.

另一件事是元素不断被下拉到输入下方的另一行。

<div class='col-md-12'>
    <div class='row'>
       <div class='col-md-5'>
          <select class='form-control'>
            <option value='us'>USA</option>
          </select>
        </div>
        <div class='col-md-7'>
          <span class="" style="display: inline">
             <span class="input-group">
                <span class="input-group-addon">
                   ZIP/Postal code
                </span>
                <input class="form-control" type="text">
             </span>
             <a href='#' class=''>
                cancel
             </a>
          </span>
       </div>
    </div>
</div>

我怎样才能把所有这些都放在一行中？这是它的 jsfiddle:http://jsfiddle.net/2656xt63/

Answer 1

您的 Bootstrap 列类没有任何问题，但元素只会在 md 屏幕宽度(>= 992px)上并排显示。 fiddle 面板比那个窄，所以元素是堆叠的。

如果您使用 col-xs-*，元素将始终并排显示。

或者，对于像这样的小表单，您可以使用 inline form :

  <form class="form-inline" role="form">
    <div class="form-group">
      <label class="sr-only" for="country">Country</label>
      <select class='form-control' id="country">
        <option value='us'>USA</option>
      </select>
    </div>
    <div class="form-group">
      <span class="input-group">
        <span class="input-group-addon">
          ZIP/Postal code
        </span>
        <input class="form-control" type="text">
      </span>
    </div>
    <div class="form-group">
      <a href="#" class="btn btn-default">
        cancel
      </a>
    </div>
  </form>

这是一个 bootply演示内联表单。