引导程序格式化列对齐问题

Question

Working html code: 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>

How can I format my lable/input field align? below is html along with screen shots how it renders after I run the page:

what I want the output to be is:

  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

I added the corresponding row-fluid to reset the grid for the label and input boxes. https://jsfiddle.net/gyod/7mgtfk3k/4/ Here is one example.

<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

I've solved this for you and created a codepen editor for this.

The code will look 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>

What I've done is wrap your form group elements into row classes which makes children appear in a row, and for the form-group classed element I've set it to col-md-12 which does make it full width of the grid.

I've also removed navbar-form class from your form element

I've heard my colleague (front-end guy) saying to use row and child elements of them as grid columns as a standard, i don't know the validity of that statement, but it works for real! :)

And a note, do not use inline styles which makes things lot worse and untraceable while looking at the code itself.

Answer 3

Try to put the label tag inside div class="col-xs-6". Then you can get a horizontal aligned elements of each div.

If you want to make it properly align, you can set default width for the label and use bootstrap built-in class for alignment.