Question

所以我对Bootstrap span有一个奇怪的问题。

我有两个跨度的输入文本。但第二个span将进入新的界限。这是一个例子：

<div class="col-md-6" style="width:50%;margin-bottom: 10px">        
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="glyphicon glyphicon-search"></span>
</div>          
</div>

JsFiddle example

如何让第二个跨度保持在同一行？

Answer 1

Just add the input-group-addon class to your second span.

<div class="col-md-6" style="width:50%;margin-bottom: 10px"> 
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        <span class="input-group-addon glyphicon glyphicon-search"></span>
    </div>
</div>

The only problem is that the glyphicon has a top:1px style which gives you an offset of 1 pixel. Just override that in your css.

第二个跨度进入新的一行

1 个答案: