Question

我用boostrap 3创建了一个屏幕。

<div class="form-group">

  <label><input type="checkbox" name="injection" id="injection">Injection</label>

 <label for="period" class="col-sm-3 control-label">Immatriculation</label>
 <div class="col-sm-6">
   <input type="number" min="0" value="52" class="form-control" id="year" name="period" placeholder="Entrer la période en semaine" data-fv-integer="true" data-fv-integer-message="La valeur doit être numérique">
 </div>

我将注射元素放在第一个位置，但它以秒显示。另外，是否有可能将医疗与另一方保持一致？

这是一个演示 https://jsfiddle.net/nqe3k71k/

Answer 1

Bootstrap网格总数应为12，现在在您提供的代码中为9

所以我想只需在localhost/myapp/frontend/web/<title>/<id>标签中添加col-sm-3，如下所示

Injection

Answer 2

我把注射元素放在第一个位置，但它显示在第二个

因为“Immatriculation”的标签和文本字段浮动到左侧，因为它们具有“control-label”和“col-sm-6”作为它们的css类。您应该将“注入”设置在它自己的行上，或者将“control-label”添加到它的类属性

另外，是否有可能将医疗与另一方保持一致？

你的意思是将“医疗”和“Diabete”对齐到表格左侧？然后我认为你应该用行和列包装它们

Answer 3

试试这个：

<强> DOM：

           <input type="hidden" class="form-control" id="medicalContactId" name="drugId">
            <div class="form-group">
                <div class="col-md-12 col-sm-12">
                    <label class="checkbox-inline no_indent">
                        <input type="checkbox" name="medicate" id="medicate">Medical
                    </label>
                    <label class="checkbox-inline no_indent">
                        <input type="checkbox" name="diabete" id="diabete">Diabete
                    </label>
                    <label class="checkbox-inline no_indent">
                        <input type="checkbox" name="injection" id="injection">Injection
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6">
                    <input type="number" min="0" value="52" class="form-control" id="year" name="period" placeholder="Entrer la période en semaine" data-fv-integer="true" data-fv-integer-message="La valeur doit être numérique">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">Tiroir médicale</label>
                <div class="col-sm-9">
                    <select id="medicalDrawer" name="medicalDrawerId" class="form-control"></select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <div class="pull-right">
                        <button id="lodgerMedicalSave" type="button" class="btn btn-primary">Sauvegarder</button>
                    </div>
                </div>
            </div>

<强> CSS：

.checkbox-inline.no_indent,
.checkbox-inline.no_indent+.checkbox-inline.no_indent {
  margin-left: 0;
  margin-right: 10px;
}
.checkbox-inline.no_indent:last-child {
  margin-right: 0;
}

反转位置元素

3 个答案: