偏移量 class 未应用于 bootstrap 2 形式

Question

应该很简单。

为什么 offsetX class 在最后 2 个 div 上不起作用？

<form class="bs-docs-example" style="padding-bottom: 15px;padding-top: 15px;">
            <div class="controls  ">
                <input class="span12" type="text" placeholder=".span12">
            </div>
            <div class="controls controls-row ">
                <input class="span4" type="text" placeholder=".span4"> 
                <input class="span8" type="text" placeholder=".span8">
            </div>
            <div class="controls controls-row ">
                <input class="span9" type="text" placeholder=".span9"> 
                <input class="span3" type="text" placeholder=".span3">
            </div>
            <div class="controls controls-row ">
                <input class="span6" type="text" placeholder=".span6"> 
                <input class="span6" type="text" placeholder=".span6">
            </div>
                        <div class="controls controls-row ">
                <input class="span4" type="text" placeholder=".span4"> 
                <input class="span6 offset2" type="text" placeholder=".span6 offset2">
            </div>
                                    <div class="controls controls-row ">
                <input class="span4 offset2" type="text" placeholder=".span4 offset2"> 
                <input class="span6 " type="text" placeholder=".span6 ">
            </div>
        </form>

可以在这里测试：http://jsfiddle.net/b0zqnmbL/

Answer 1

您需要将 offset-* 类分配给父级，因为下面的 Bootstrap 规则覆盖了输入跨度元素的偏移量。

input[class*="span"] { margin-left: 0; }

由于需要保留控件类并且还在同一行，所以我修改了标记并添加了媒体查询。

修改后的代码：

<div class="controls controls-row ">
    <input class="span4" type="text" placeholder=".span4">
</div>
<div class="controls controls-row offset2">
    <input class="span6" type="text" placeholder=".span6 offset2">
</div>
<div class="controls controls-row offset2">
    <input class="span4" type="text" placeholder=".span4 offset2">
</div>
<div class="controls controls-row ">
    <input class="span6 " type="text" placeholder=".span6 ">
</div>

@media (min-width: 768px) {
   .controls-row {
     display: inline-block;
   }
}

Updated JSfiddle

Answer 2

使用

<div class="offset2">
  <input class="span6" type="text" placeholder=".span6 offset2">
</div>

而不是

<input class="span6 offset2" type="text" placeholder=".span6 offset2">

更新：

它的行为很有趣。我通过以下代码让它工作：我知道这不是确切的答案，但如果你能同时摆脱它的话 ;)

<form class="bs-docs-example" style="padding-bottom: 15px;padding-top: 15px;">
<div class="controls  ">
    <input class="span12" type="text" placeholder=".span12">
</div>
<div class="controls controls-row ">
    <input class="span4" type="text" placeholder=".span4">
    <input class="span8" type="text" placeholder=".span8">
</div>
<div class="controls controls-row ">
    <input class="span9" type="text" placeholder=".span9">
    <input class="span3" type="text" placeholder=".span3">
</div>
<div class="controls controls-row ">
    <input class="span6" type="text" placeholder=".span6">
    <input class="span6" type="text" placeholder=".span6">
</div>
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
    <div class="span2" ></div>
    <div class="offset2">
        <input class="span6" type="text" placeholder=".span6 offset2">
    </div>
</div>
<div class="controls controls-row">
    <div class="offset2">
    <input class="span4" type="text" placeholder=".span4 offset2">
        </div>
    <input class="span6 " type="text" placeholder=".span6 ">
</div>
</form>

或者，如果您对仅使用 offset2 不是很严格，我会建议一个替代方案：

<div class="controls controls-row">
    <input class="span4" type="text" placeholder=".span4">
    <div class="span2" ></div>
    <input class="span6" type="text" placeholder=".span6 offset2">
</div>
<div class="controls controls-row">
    <div class="span2"></div>
    <input class="span4" type="text" placeholder=".span4 offset2">
    <input class="span6 " type="text" placeholder=".span6 ">
</div>

Answer 3

一点也不优雅，但到目前为止，我得到的结果比 Megh Vidani 和 Manoj Kumar 的解决方案更好：

...
<div class="controls controls-row">
    <input class="span4" type="text" placeholder=".span4">
    <label class="span2"   ></label>
    <input class="span6" type="text" placeholder=".span6 offset2">
</div>
...

丑陋但 100% 有效。大家可以随意 post 更优雅的解决方案。

偏移量 class 未应用于 bootstrap 2 形式

offset class not applied into a bootstrap 2 form

html

css

twitter-bootstrap

twitter-bootstrap-2