Question

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

我拥有的是：

我无法想象如何处理col-sm-2和col-sm-10“我已经厌倦了4列，然后是8列，但总是凌乱（我读过http://getbootstrap.com/css/）

我的代码树枝：

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

Answer 1

打开表单后添加此标签

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

//your code 

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

Answer 2

这是一个简单的例子，我希望每个屏幕上都有相同的列，所以我使用的是类col-lg-x, col-md-x col-sm-x, col-xs-x。

.custom-locale-form {
  padding: 1.6rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>


<div class="container fluid custom-locale-form">
  <form>
    <div class="form-group row">
      <label for="language" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 form-control-label">Label 1</label>
      <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
        <input data-bind="value: language" type="text" class="form-control" id="language" placeholder="input1">
      </div>
    </div>
    <div class="form-group row">
      <label for="country" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 form-control-label">Lablel 2</label>
      <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
        <input data-bind="value: country" type="text" class="form-control" id="country" placeholder="input2">
      </div>
    </div>
    <div class="form-group row">
      <label for="variant" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 form-control-label">Label 3 vary long</label>
      <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
        <input data-bind="value: variant" type="text" class="form-control" id="variant" placeholder="input3">
      </div>
    </div>
  </form>
</div>

Answer 3

col-sm-2只占宽度的16,66％。你试过col-sm-4吗？

对于Bootstrap 3：

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

对于Bootstrap 4：

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

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

无法处理bootstrap css

3 个答案: