Question

使用HTML代码：UPDATED

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>

<form class="form-horizontal ng-pristine ng-valid ng-valid-required" role="search">
    <div class="row">
        <div class="form-group col-md-12">
            <label class="control-label col-md-6" for="inputEmail">Employee Name:</label>
              <div class="col-md-4">
                <input class="form-control" disabled="disabled" id="inputEmail" type="email" value="John Edward Jr.">
              </div>
              <div class="col-md-2">
                <button class="form-control btn btn-info">Hello world</button>
              </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group col-md-12">
            <label class="control-label col-md-6" for="inputEmail">My Owning Location:</label>
            <div class="col-md-6">
                <input class="form-control" disabled="disabled" id="inputEmail" type="email" value="abc123 234sd 343 scott 359 to-34-23-3">
            </div>
        </div>
    </div>
</form>

如何格式化我的标签/输入字段对齐？下面是html以及屏幕截图我在运行页面后呈现的方式：

我想要的输出是：

        Employee Name:         XXXXXXXXXXXXX
   My Owning Location:         XXXXXXXXXXXXX
         Manager Name:         XXXXXXXXXXXXX

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
 <link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>
<form class="navbar-form form-horizontal ng-pristine ng-valid ng-valid-required" role="search" style="padding:0">
    <div class="col-md-12" style="margin: 10px;">

        <div class="form-group">
            <label class="control-label col-md-6" for="inputEmail">Employee Name:</label>
            <div class="col-lg-6">
                <input class="form-control" disabled="disabled" id="inputEmail" type="email" value="John Edward Jr.">
            </div>
        </div>
    </div>

    <div class="col-md-12" style="margin: 10px;">
        <div class="form-group">
            <label class="control-label col-md-6" for="inputEmail">My Owning Location:</label>
            <div class="col-lg-6">
                <input class="form-control" disabled="disabled" id="inputEmail" type="email" value="abc123 234sd 343 scott 359 to-34-23-3">
            </div>
        </div>
    </div>
</form>

Answer 1

我添加了相应的行液以重置标签和输入框的网格。 https://jsfiddle.net/gyod/7mgtfk3k/4/这是一个例子。

<form class="container row-fluid navbar-form form-horizontal ng-pristine ng-valid ng-valid-required" role="search" style="padding:0">
  <div class="col-md-12" style="margin: 10px;">

    <div class="row-fluid">
        <label class="control-label col-xs-3" for="inputEmail">Employee Name:</label>
        <div class="col-xs-9">
            <input class="form-control" disabled="disabled" id="inputEmail" type="email" value="John Edward Jr.">
        </div>
    </div>
</div>

<div class="col-md-12" style="margin: 10px;">
    <div class="row-fluid">
        <label class="control-label col-xs-3" for="inputEmail">My Owning Location:</label>
        <div class="col-xs-9">
            <input class="form-control" disabled="disabled" id="inputEmail" type="email" value="abc123 234sd 343 scott 359 to-34-23-3">
        </div>
    </div>
  </div>
</form>

Answer 2

我已经为您解决了这个问题并为此创建了codepen editor。

代码将显示为lke，

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>

<form class="form-horizontal ng-pristine ng-valid ng-valid-required" role="search">
    <div class="row">
        <div class="form-group col-md-12">
            <label class="control-label col-md-6" for="inputEmail">Employee Name:</label>
            <div class="col-md-6">
                <input class="form-control" disabled="disabled" id="inputEmail" type="email" value="John Edward Jr.">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group col-md-12">
            <label class="control-label col-md-6" for="inputEmail">My Owning Location:</label>
            <div class="col-md-6">
                <input class="form-control" disabled="disabled" id="inputEmail" type="email" value="abc123 234sd 343 scott 359 to-34-23-3">
            </div>
        </div>
    </div>
</form>

我所做的是将表单组元素包装到row类中，使子项出现在一行中;对于form-group类的元素，我将其设置为col-md-12这确实使它成为网格的全宽。

我还从navbar-form元素

中删除了form类

我听说我的同事（前端人）说使用row和他们的子元素作为网格列作为标准，我不知道该声明的有效性，但它适用于真实！：）

并且注意，不要使用内联样式，这会使代码本身看起来更糟糕且难以追踪。

Answer 3

尝试将label标签放在div class =“col-xs-6”中。然后你可以得到每个div的水平对齐元素。

如果要使其正确对齐，可以设置标签的默认宽度，并使用bootstrap内置类进行对齐。

引导格式列对齐问题

3 个答案: