bootstrap中文本框和按钮的CSS对齐问题答案

【问题标题】：CSS alignment issue of textbox and button in bootstrapbootstrap中文本框和按钮的CSS对齐问题
【发布时间】：2016-10-09 17:18:31
【问题描述】：

我是 Angular 的新手，正在尝试开发我的第一个应用程序，但使用引导类卡住了。

这是我的代码：

<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 上，我也只找到了关于右对齐的解决方案。

【问题讨论】：

“顶部对齐”是什么意思？你到底希望它是怎样的？
@Roysh 我希望添加按钮与客户端下拉列表对齐，而不是像现在这样与客户端标签对齐
知道了。那么最简单和最丑陋的解决方案是为按钮添加一些填充/边距并将它们与输入对齐。否则，请尝试将标签标签从行中取出。顺便说一句，您可以尝试上传小提琴吗？
我尝试了边距/填充，它对我有用，但这不是一个好的解决方案。没有像pull-right这样的东西吗？
试试看这里：stackoverflow.com/questions/14416563/…stackoverflow.com/questions/19404861/…

标签： html css twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

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>

【讨论】：

【解决方案2】：

您可以使用 flex-box 进行对齐。我附上了我创建的一个 plunker。如果您有任何问题，请告诉我。

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

谢谢！

【讨论】：

【解决方案3】：

您还可以将 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>

【讨论】：

【解决方案4】：

试试这段代码，我不确定，但<label >&nbsp;</label>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>

【讨论】：

同意 Roysh 请创建一个 codepen @NullPointer
不可能，它可能会起作用。我不喜欢这个空标签，但它应该可以完美运行。您缺少一些细节
我已经使用了您的代码并将标签标签放在 to 行标签之外，它似乎可以工作
看这个小提琴：jsfiddle.net/DTcHh拉宽窗口以整页查看结果

【解决方案5】：

改为创建一个表格并垂直对齐您的 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 以获得确切的布局，但这应该根据需要对齐你的元素。

【讨论】：

表格没有响应......我猜对于两个输入，表格实现不是好方法