Css 如何使用Bootstrap 3将所有这些都放到一行上？

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

另一件事是元素一直被拉到输入下面的另一行

<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：

引导列类没有问题，但是元素只会在md屏幕宽度（>=992px）上并排出现。小提琴面板比这窄，因此元素是堆叠的

如果使用列xs-*元素将始终并排显示

或者，对于这样的小表单，您可以使用：

国家
美国
邮政编码

下面是一个演示内联表单的示例

  <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>