无法操纵标签和字段引导程序

Question

我正在使用bootstrap模板， 我无法操纵标签的大小和字段输入它们的处理（左对齐），下面的两个图像显示我想要的和我拥有的。  我看过关于网格系统的文档（https://getbootstrap.com/docs/3.3/css/#grid），但我无法理解它。

我所拥有的：

我想要什么

使用的代码：

<div class="container fluid custom-locale-form">
 <div class="form-group row">
        <label for="numeroTelephone" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 form-control-label">Information</label>
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">

        </div>
    </div>


    <div class="form-group row">
        <label for="numeroTelephone" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 form-control-label">Numéro de téléphone</label>
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
            {{ form_widget(form.numeroTelephone, {'attr':{'class': 'form-control'}}) }}
        </div>
    </div>

    <div class="form-group row">
        <label for="numeroFax" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 form-control-label">Numéro de fax</label>
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
            {{ form_widget(form.numeroFax, {'attr':{'class': 'form-control'}}) }}
        </div>
    </div>

    <div class="form-group row">
        <label for="email" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 form-control-label">E-mail</label>
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
            {{ form_widget(form.email, {'attr':{'class': 'form-control'}}) }}
        </div>
    </div>

    <div class="form-group row">
        <label for="inputPassword3" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 form-control-label">Site web</label>
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
            {{ form_widget(form.siteWeb, {'attr':{'class': 'form-control'}}) }}
        </div>
    </div>
</div>

Answer 1

对您的代码提出一些意见。

1. 使用网格布局时，它足以设置较小的分辨率等级，因此它也适合更大的屏幕。因此，您可以只使用较小的一个并删除所有其他类，而不是使用col-xs-3 col-sm-3 col-md-3 col-lg-3：class="col-xs-3"

2. 您可以设置列的偏移量，以便在之前或之后添加一些间距，例如：class="col-xs-2 col-xs-offset-1"。这样，您将保留在＆＃39; 3列中。宽度，但第一列为空格，内容宽度限制为2列。那是初学者的目标。如果您需要对标签使用固定缩进（不使用列），则只需使用特定CSS规则向标签添加填充。类似的东西：

   .form-group label {
     padding-left: 20px;
   }