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是一个块元素，因此占用所有水平空间。只需将其属性更改为内联即可。

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

Answer 2

在bootstrap css中，表单控件样式占用总区域宽度，使用此解决方案它将正常工作

        <div class="row">
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <label>A:</label>
              </div>
              <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                  <input type="text" class="form-control" disabled="disabled" />
              </div>
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                  <label>B</label>
              </div>
          </div>
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
              <!-- more fields goes here -->
          </div>
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
              <!-- more fields goes here -->
          </div>
      </div>

它也支持响应，这意味着您可以在任何大小的屏幕上看到此视图

希望这可能有用

Answer 3

感谢Drea和Jake。我不得不删除div上的输入组类，并使用样式显示创建另一个：内联，它对我有用。实际上我使用垂直对齐的表格，我必须水平调整几个字段。这是经过调整的代码。

现在接下来的挑战是控制间距：）

<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="txtA" class="control-label col-sm-5">A :</label>
                      <div class="col-sm-4">
                         <input class="form-control" id="txtA" type="text" placeholder="" disabled>
                       </div>
                      <div class="col-sm-3" style="display:inline">
                         <label>B</label>
                       </div>


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

Answer 4

如果您喜欢小代码。使用右拉和左拉

＆＃13;

.wrapper {
    position: absolute;
}
#textbox {
  width: 200px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="wrapper">
  <lable class="pull-left">Foo:</lable>
  <lable class="pull-right">Bar:</lable>
  <input type="text" id="textbox" class="form-control">
</div>

＆＃13;

Bootstrap形式 - 在文本框右侧的标签

4 个答案: