Question

我是Angular的新手并试图开发我的第一个应用程序，但使用bootstrap类保持对齐。

这是我的代码：

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

这里是此代码的输出

问题是所有这些输入都是顶部对齐的，但我希望客户端下拉菜单和两个按钮都是底部对齐的。

我尝试了input-group-btn课，但这对我不起作用。即使在StackOverflow上，我也找到了关于右对齐的解决方案。

Answer 1

尝试使用此代码，我不确定<label > </label>这应该可以将它们排成一行。

更新此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

你也可以将margin-top css样式应用于包含这些按钮的div。

<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

创建一个表格，然后垂直对齐你的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>

然后：

td{
 vertical-align:bottom
}

注意：这不是一个绝对的解决方案。仔细检查你的css和html以获得确切的布局，但这应该根据需要调整你的元素。

Answer 4

您可以使用flex-box进行此对齐。我附上了一个我创造的傻瓜。如果您有任何疑问，请告诉我。

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;
}

谢谢！

Answer 5

div inside div解决了我的问题..这是我的代码

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

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

5 个答案: