引导中文本框和按钮的CSS对齐问题

Question

I'm newbie in Angular and trying to develop my first application but stuck in alignment using bootstrap classes.

Here is my Code:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="form-group col-md-4"> <label>Client</label> <Select class="form-control"> <option>Client 1</option> <option>Client 2</option> <option>Client 3</option> <option>Client 4</option> <option>Client 5</option> <option>Client 6</option> </Select> </div> <div class="form-group col-md-4"> <button type=submit class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Add</button> </div> <div class="form-group col-md-4"> <button type="submit" class="btn btn-sm btn-info pull-right" vertical-align="bottom"><i class="fa fa-dot-circle-o"></i> Get Data</button> </div> </div> 

and here the output of this code

Problem is that all these inputs are top-aligned but I want client dropdown and both buttons to be bottom aligned.

I tried input-group-btn class but that didn't work for me. Even here on StackOverflow, I found solutions only about right-alignment.

Answer 1

try this code, i am not sure but <label >&nbsp;</label> this should work to align them in one line.

update this css

<style>    
   label {
        width: 100%;
    }
</style>

 label { width: 100%; } 

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="row"> <div class="form-group col-md-4"> <label >Client</label> <Select class="form-control" > <option>Client 1</option> <option>Client 2</option> <option>Client 3</option> <option>Client 4</option> <option>Client 5</option> <option>Client 6</option> </Select> </div> <div class="form-group col-md-4"> <label >&nbsp;</label> <button type=submit class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Add </button> </div> <div class="form-group col-md-4"> <label >&nbsp;</label> <button type="submit" class="btn btn-sm btn-info pull-right" vertical-align="bottom"><i class="fa fa-dot-circle-o"></i> Get Data </button> </div> </div> 

Answer 2

you can also apply margin-top css style to div which contains those buttons.

<style>    
   .margin_top_25 {
       margin-top:25px;
    }
</style>

<div class="row">
  <div class="form-group col-md-4">
    <label >Client</label>
    <Select class="form-control" >
      <option>Client 1</option>
      <option>Client 2</option>
      <option>Client 3</option>
      <option>Client 4</option>
      <option>Client 5</option>
      <option>Client 6</option>
    </Select>
  </div>
  <div class="form-group col-md-4 margin_top_25">
    <button type=submit class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Add </button>
  </div>
  <div class="form-group col-md-4 margin_top_25">
    <button type="submit" class="btn btn-sm btn-info pull-right" vertical-align="bottom"><i class="fa fa-dot-circle-o"></i>  Get Data </button> 
  </div>
</div>

Answer 3

Create a table instead and vertical align your tds :

<table>
  <tr class="row">
   <td class="col-md-4"><label >Client</label>
    <Select class="form-control" >
      <option>Client 1</option>
      <option>Client 2</option>
      <option>Client 3</option>
      <option>Client 4</option>
      <option>Client 5</option>
      <option>Client 6</option>
    </Select>
   </td>
   <td class="col-md-4">
     <button type=submit class="btn btn-sm btn-success"><i class="fa      fa-dot-circle-o"></i> Add </button>
   </td>
   <td class="col-md-4">
     <button type="submit" class="btn btn-sm btn-info pull-right"  vertical-align="bottom"><i class="fa fa-dot-circle-o"></i>  Get Data </button> 
   </td>
</tr>
</table>

And then :

td{
 vertical-align:bottom
}

Note : This is not an absolute solution.Tweak your css and html to get the exact layout , but this should align your elements as desired.

Answer 4

You can do this alignment by using flex-box. I have attached a plunker I created. If you have any questions then please let me know.

Plunkr

.form-group {
  width: 50%;
  margin: 0 auto;
  margin-top: 10%;
}

.client-label {
  margin-left: 40%;
  font-size: 3vw;
  text-transform: uppercase;
  color: teal;
}

.add-button {
  width: 100px;
}

.data-button {
  width: 100px;
}

div.form-group {
  width: 50%;
  margin-left: 25%;
}

.buttons {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  justify-content: space-between;
}

Thanks!

Answer 5

div inside div resolved my problem.. here is my code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

 <div class="row">
     <div class="col-md-12">
          <label >Client</label>
          <div class="row">
               <div class="form-group col-md-4">
                     <Select class="form-control" >
                           <option>Client 1</option>
                           <option>Client 2</option>
                           <option>Client 3</option>
                           <option>Client 4</option>
                           <option>Client 5</option>
                           <option>Client 6</option>
                          </Select>
                         </div>
                         <div class="form-group col-md-4">
                             <button type=submit class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Add </button>
                         </div>
                         <div class="form-group col-md-4">
                              <button type="submit" class="btn btn-sm btn-info pull-right" vertical-align="bottom"><i class="fa fa-dot-circle-o"></i>  Get Data </button> 
                          </div>
                      </div>

              </div>
            </div>