Question

应该很容易。

为什么offsetX类不适用于最后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％。所有人都可以发布更优雅的解决方案。

offset类未应用于bootstrap 2表单

3 个答案: