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

我是Angular的新手，并试图开发我的第一个应用程序，但坚持使用引导类对齐。CSS对齐问题的文本框和引导按钮

这里是我的代码：

<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的这里，我也只找到了解决方案的解决方案。

来源

2016-06-09 Null Pointer

你是什么意思的“顶端对齐”？你到底想如何？ – Roysh

@Roysh我想要添加按钮与客户端下拉列表不对齐，因为它现在是 –

明白了。那么最简单和最丑陋的解决方案是向按钮添加一些填充/边距并将它们与输入对齐。否则，请尝试将标签标签从行中移出。顺便说一句，你可以尝试上传小提琴吗？ – Roysh

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>

来源

2016-06-10 09:58:44

试试这个代码，我不知道，但<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>

来源

2016-06-09 08:22:36

没有为我工作..同样的结果 –

你可以上传你的css代码吗？ – Roysh

赞同Roysh请创建一个codepen @NullPointer –

创建一个表，而不是和垂直对齐您的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以获得确切的布局，但是这应该根据需要调整你的元素。

来源

2016-06-09 08:31:23 Rambler

表没有响应..我猜两个输入，表执行不好的方法 –

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

来源

2016-06-09 08:47:40

工作，但不是什么我想 –

您可以通过使用弹性盒进行对齐。我附加了一个我创建的笨蛋。如果您有任何问题，请让我知道。

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

谢谢！

来源

2016-06-09 09:04:09 Troy

对不起，但我不想更新我的CSS –

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

回答

相关问题