twitter-bootstrap将搜索图像对齐到输入字段旁边

Question

如何使用bootstrap对齐输入字段旁边的图像，

我按以下方式申请，但显示的空白空间很大。

<div class="form-group"> 
  <div class="col-md-3">
    <label class="control-label">Account Number</label>
    <input type="text" class="form-control">
  </div>
  <div class="col-md-1">    
            <button class="btn-icon btn-icon-print"><img src="images/search.png"></button>
   </div>
</div>

图片快照：

Answer 1

这是因为你正在分隔你的列...你看，你的按钮是一个自己的md-1列，而你的条是一个md-3列...每列之间是一个15px的边距（总共30个）在左边和右边。最好做到与众不同。

可能像

<div class="form-group"> 
  <div class="col-md-3">
    <div class="col-md-9 margin-fix">
      <label class="control-label">Account Number</label>
      <input type="text" class="form-control">
    </div>
    <div class="col-md-3 margin-fix">    
      <button class="btn-icon btn-icon-print"><img src="images/search.png"></button>
    </div>
  </div>
</div> 

<style>
  .margin-fix {margin-left, margin-right: 0px;}
</style>

这样你就可以将它包装在col-md-3中。你现在还有一个保证金问题，但是因为我对你的元素应用了一个保证金修复，它不应该注册保证金，因此将它们全部放在一起。

您可以通过将其更改为col-md-4来使其更大。您现在使用col-md-3作为容器来包装它，并且它将根据您应用的列的大小进行缩放。

修改。

如果您想要内联按钮，请查看bootstraps布局

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text" class="form-control" placeholder="Search for...">
</div>

输入组是一个非常酷的功能，它允许项目“包裹”在元素中。

http://getbootstrap.com/components/#input-groups-buttons