Bootstrap 3 - 2输入在同一行，但与一个输入的宽度不同

Question

标题可能听起来很棘手，但这是我的问题：

“Nom”和“Prénom”的输入，如我所愿，在同一行，但它们与第一个输入的宽度不同。

这是我的代码：

<form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label"><abbr title="Code National de l'Étudiant">CNE</abbr> <span class="important">*</span></label>
            <div class="col-sm-10">
              <input type="text" name="cne" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="nom" class="col-sm-2 control-label">Nom <span class="important">*</span></label>
            <div class="col-sm-10">
                <div class="col-sm-6">
                    <input type="text" name="nomFr" class="form-control" id="nom" placeholder="En français">
                </div>
                <div class="col-sm-6">
                    <input type="text" name="nomAr" class="form-control" id="nom" placeholder="العربية" dir="rtl">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="prenom" class="col-sm-2 control-label">Prénom <span class="important">*</span></label>
            <div class="col-sm-10">
                <div class="col-sm-6">
                    <input type="text" name="prenomFr" class="form-control" id="prenom">
                </div>
                <div class="col-sm-6">
                    <input type="text" name="prenomAr" class="form-control" id="prenom" placeholder="العربية" dir="rtl">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="dateNaissance" class="col-sm-2 control-label">Date de naissance <span class="important">*</span></label>
            <div class="col-sm-10">
                <input type="date" name="dateNaissance" class="form-control" id="dateNaissance">
            </div>
        </div>
    </form>

Answer 1

您需要在row div上添加<div class="col-sm-10">课程。这会设置负填充，这意味着按列设置的位置填充允许它排列。

查看http://getbootstrap.com/css/#grid-nesting获取信息。

<div class="form-group">
    <label for="nom" class="col-sm-2 control-label">Nom <span class="important">*</span></label>
    <div class="col-sm-10 row">
        <div class="col-sm-6">
            <input type="text" name="nomFr" class="form-control" id="nom" placeholder="En français">
        </div>
        <div class="col-sm-6">
            <input type="text" name="nomAr" class="form-control" id="nom" placeholder="العربية" dir="rtl">
        </div>
    </div>
</div>

Answer 2

小心如何嵌套元素。在嵌套col之前必须有一个新行。

 <div class="col-sm-10 row">
  <div class="row">
    <div class="col-sm-6">
        <input type="text" name="nomFr" class="form-control" id="nom" placeholder="En français">
    </div>
    <div class="col-sm-6">
        <input type="text" name="nomAr" class="form-control" id="nom" placeholder="العربية" dir="rtl">
    </div>
  </div>
</div>

每个容器和col- *左右都有15px的填充。行元素的左右边距设置为-15px以进行补偿。所以容器＆gt;行＆gt; col＆gt; row＆gt; col等

Answer 3

实际上，您不需要为每组col-元素添加一行，因为.form-group类与.row类相同加上bottom-margin - 你可以说在语义上它更好......嗯。

主要问题是你在10列跨度元素中嵌套2 x 6列跨度元素，并且你已经用了2个带有标签的列，所以它都错了。

您可能知道，Bootstrap使用12列网格系统，因此如果您创建一个元素并应用col-sm-2，那么您还剩下10列。如果您有2个元素，每个元素跨越6列，那么它将不起作用。

你可以做的就是失去额外的<div class="col-sm-10">并将你的2 input改为每个5个col：

<div class="form-group">
    <label for="nom" class="col-sm-2 control-label">Nom <span class="important">*</span></label>
    <div class="col-sm-5">
        <input type="text" name="nomFr" class="form-control" id="nom" placeholder="En français">
    </div>
    <div class="col-sm-5">
      <input type="text" name="nomAr" class="form-control" id="nom" placeholder="العربية" dir="rtl">
    </div>
</div>

这将为您提供您真正想要的内容 - 2个列区域中的每个输入字段与单个列区域中字段的边缘对齐。

注意：我在这里使用form-group因为底部边距填充了行并且看起来很好IMO。