如何使用.input-append与.form-inline？

我是Twitter Bootstrap的新手，我开始摸索通过它的使用方式。虽然框架的某些方面开始有意义，但我仍然在努力处理表单样式。我正在尝试设置几个不同的表单部分，这些表单将使用.form-inline进行样式化。在这种情况下，我也尝试使用.input-append，但运气不佳。如何使用.input-append与.form-inline？

<div class="row"> 
    <div class="well span12"> 
     <div class="row"> 
      <div class="span12 form-inline input-append"> 
       <label for="assetSearch">Asset Search</label> 
       <input type="search" id="assetSearch" placeholder=""> 
       <span class="add-on"><i class="icon-search"></i></span> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="span12 form-inline"> 
       <label for="service">Service</label> 
       <input type="text" id="service" autocomplete="off" /> 
      </div> 
     </div> 
    </div> 
</div>

上面标记呈现这样的：

screenshot of how the above markup renders

正如你可以看到“资产搜索”不与表单输入内联。如果我从包含div的东西排除.input-append类。但是，搜索图标不再嵌入文本框中，而是嵌入在文本框的右侧。

如何使用.form-inline与.input-append并存？

来源

2013-02-15 ahsteele

你不应该把一个input-append（或前置）以外的任何input S，button秒或.add-on其他小号里面（这可能不是全部）。

尝试包裹了整个事情变成div.input-append，让.form-inline办理浮动：Demo on jsfiddle

<div class="span12 form-inline"> 
    <label for="assetSearch">Asset Search</label> 
    <div class="input-append"> 
     <input type="search" id="assetSearch" placeholder="" /> 
     <span class="add-on"><i class="icon-search"></i></span> 
    </div> 
</div>

来源

2013-02-16 00:54:12 Sherbrow

这里的工作定位的小提琴：http://jsfiddle.net/Jeff_Meadows/xGRtL/

两个修补程序是设置里面.input-append类的元素<label>的vertical-align元素，并重置元素14px的的font-size（它被设置为0，否则，在某处引导）。我没有创建基于.input-append的规则，而是创建了一个可以添加到包含元素的新类。这样，你就不会在其他地方得到意想不到的结果。

.input-prepend label, .input-append label { 
    vertical-align: middle; 
} 
.fix-text-spacing { 
    font-size: 14px; 
}

来源

2013-02-16 00:23:57

如何使用.input-append与.form-inline？

回答

相关问题