Question

我有两个输入框，我试图在排上并排，但我希望盒子之间仍然有间隙，但是与容器的两侧齐平。

有没有办法只使用Bootstrap来做到这一点？容器是移动设备的复制。

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

plunkr example

Answer 1

Bootstrap有几个不同的网格类。 col-<size>-<num>其中<size>可以是xs，sm，md或lg，<num>可以是（{1}}之间的整数并包括）1 - 12。

对于移动设备，您需要使用xs。如果您没有指定任何较大的尺寸，那么它们将使用与较小尺寸相同的宽度。如果您将col-sm-12更改为col-xs-12而将col-sm-6更改为col-xs-6，我认为您将获得所需的结果。

如果您为他们提供form-control课程，它还可以帮助您的输入看起来更加一致且更容易为主题。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="group col-xs-12">
    <div class="row">
        <div class="col-xs-6">
            <div class="row">
                <input class="form-control" type="text" name="first-name" />
            </div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <input class="form-control" type="text" name="last-name" />
            </div>
        </div>
    </div>
</div>

Answer 2

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

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

并排嵌套Bootstrap输入框

2 个答案: