css - Bootstrap 表单 - 文本框右侧的标签

Question

我几乎尝试了所有方法，但这些字段没有水平对齐。

它应该像 A: 文本框 B

            <div class="form-group form-horizontal">
               <div class="col-sm-4">
                  <div class="form-group col-sm-10" style="border:1px solid red">
                        <label for="inlineFold" class="control-label col-sm-5">A :</label>
                          <div class="input-group  col-sm-4">
                             <input class="form-control" id="txtA" type="text" placeholder="" disabled>
                                <span>B</span>
                           </div>

                  </div>
               </div>
               <div class="col-sm-4">
                      <!-- more fields goes here -->
               </div>
               <div class="col-sm-4">
                      <!-- more fields goes here -->
                </div>
        </div>

Answer 1

div 是 block 元素，因此占据了所有水平空间。只需将其属性更改为内联即可。

CSS

.input-group{
    display: inline;
}

或

改用跨度

HTML

<div class="form-group form-horizontal">
    <div class="col-sm-4">
        <div class="form-group col-sm-10" style="border:1px solid red">
            <label for="inlineFold" class="control-label col-sm-5">A :</label>
            <span class="input-group  col-sm-4">
                <input class="form-control" id="txtA" type="text" placeholder="" disabled> <span>B</span>

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