不能'；无法处理引导css

我是bootstrap新手，我使用的是默认模板，我有一个带有标签和输入的表单，我要做的是将所有标签放在左侧，然后输入，但我无法将它们放在正确的格式我想要的是：

我得到的是：

我不知道如何处理col-sm-2和col-sm-10“我已经厌倦了划分4列，然后是8列，但总是杂乱无章（我读过）

我的代码小枝：

{{ form_start(form, {'attr':{'class': 'form-horizontal'}}) }}
<div class="form-group">
    <label for="namelabo" class="col-sm-2 control-label">Name Of laboratorie</label>
    <div class="col-sm-10">
        {{ form_widget(form.namelabo, {'attr':{'class': 'form-control'}}) }}
    </div>
</div>

<div class="form-group">
    <label for="numberlabo" class="col-sm-2 control-label">Number laboratories</label>
    <div class="col-sm-10">
        {{ form_widget(form.numberlabo, {'attr':{'class': 'form-control'}}) }}
    </div>
</div>
<div class="form-group">
    <label for="statuslabo" class="col-sm-2 control-label">The status of the laboratory</label>
    <div class="col-sm-10">
        {{ form_widget(form.statuslabo, {'attr':{'class': 'form-control'}}) }}
    </div>
</div>
<div class="form-group">
    <label for="faxnumber" class="col-sm-2 control-label">fax number</label>
    <div class="col-sm-10">
        {{ form_widget(form.faxnumber, {'attr':{'class': 'form-control'}}) }}
    </div>
</div>
<div class="form-group">
    <label for="email" class="col-sm-2 control-label">E-mail</label>
    <div class="col-sm-10">
        {{ form_widget(form.email, {'attr':{'class': 'form-control'}}) }}
    </div>
</div>

{{form_start（form，{'attr'：{'class'：'form horizontal'}}}}
实验室名称
{{form_小部件（form.namelabo，{'attr'：{'class'：'formcontrol'}}}}}
数字实验室
{{form_小部件（form.numberlabo，{'attr'：{'class'：'form control'}}}}}
实验室的状况
{{form_小部件（form.statuslabo，{'attr'：{'class'：'form control'}}}}}
传真号码
{{form_小部件（form.faxnumber，{'attr'：{'class'：'form control'}}}}
电子邮件
{{form_小部件（form.email，{'attr'：{'class'：'form control'}}}}

打开表单后添加此标签

<div class="row">
<div class="col-md-12">
<div class="col-md-6">

//your code 

</div>
</div>
</div>

//你的代码

---

使用

col-sm-2

时，您只占宽度的16.66%。您是否尝试过

col-sm-4

对于引导3：

<div class="form-group row">
    <label ... class="col-sm-4 control-label">...</label>
    <div class="col-sm-8">
</div>

...

对于引导4：

<div class="form-group row">
    <label ... class="col-4 control-label">...</label>
    <div class="col-8">
</div>

...

---

我建议您使用bootstrap 3，因为4仍然在alpha中。

这里是一个简单的示例，我希望每个屏幕上都有相同的列，所以我使用的是类

col-lg-x，col-md-x col-sm-x，col-xs-x

。自定义区域设置表单{
填充：1.6rem；
}

标签1
标签2
标签3的长度不同

使用

col-sm-2

仅占宽度的16.66%。您是否尝试过

col-sm-4

？标签如何在左侧对齐？