Css 并排嵌套引导输入框

我有两个输入框，我正试图得到并排的一排，但我想仍然有一个盒子之间的差距，但齐平的容器的两侧

有没有一种方法可以使用引导来实现这一点？容器是移动设备的复制

<div class="group col-sm-12">
    <div class="row">
        <div class="col-sm-6">
            <div class="row">
                <input type="text" name="first-name" ng-model="user.firstname" />
            </div>
        </div>
        <div class="col-sm-6">
            <div class="row">
                <input type="text" name="last-name" ng-model="user.surname" />
            </div>
        </div>
    </div>
</div>

---

我不熟悉引导，但实现它的一种方法是将其添加到CSS中：

.col-sm-6, .col-sm-6 .row, .col-sm-6 .row input {
    display: inline-block;
}

---

引导有几个不同的网格类

col--

其中

可以是

xs

、

sm

、

md

或

lg

，并且

可以是介于

1

-

12

之间的整数

对于移动设备，您需要使用

xs

。如果没有指定任何较大的尺寸，则它们将使用与较小尺寸相同的宽度。如果您将

col-sm-12

更改为

col-xs-12

并将

col-sm-6

更改为

col-xs-6

，我想您会得到您想要的结果

如果您为输入提供

表单控件

类，它还可以帮助您的输入看起来更一致，更容易主题化

---

我不确定是否正确理解了您的问题。文本框之间需要一个空格，对吗？如果是这样，请尝试此代码。也可以使用col-xs-offset-1表示栅格之间的间距。这将允许您推开1个网格。范例

创建您自己的类，该类删除填充并应用于您的

col-sm-6

。另外，删除内部

.row

div。此链接提供了一个不同的解决方案。是否需要在框之间留出一个空间？这并不理想，这些类将在引导页面中重复使用，重写它们可能会导致页面上的其他部分出现问题。@VladBardalez这可能是真的；然而，如果OP的问题/Plunkr中没有更多的代码，我不能安全地假设这个CSS会修改任何冲突的代码。

          <div class="col-md-4">
            <input type="text" class="form-control">
          </div>
          <div class="col-md-4 ">
            <input type="text" class="form-control"><br>
         </div>
 <!-- for more spacing between boxes--> 
      <div class="col-xs-5">
           <input type="text" class="form-control">
      </div>
     <div class="col-xs-5 col-xs-offset-1">
        <input type="text" class="form-control">

      </div>