Css 偏移类未应用于引导2窗体

这应该很容易

为什么offsetX类不适用于最后两个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>

---

可以在此处进行测试：

您需要将

偏移量-*

类分配给父类，因为带有输入span元素的偏移量被下面的引导规则覆盖

input[class*=“span”]{左边距：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;
   }
}

@介质（最小宽度：768px）{
.控件行{
显示：内联块；
}
}

---

您需要将

offset-*

类分配给父类，因为下面的引导规则正在覆盖带有输入span元素的偏移

input[class*=“span”]{左边距：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;
   }
}

@介质（最小宽度：768px）{
.控件行{
显示：内联块；
}
}

使用

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

使用

---

一点也不优雅，但到目前为止，我得到的结果比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%的效率。

---

大家都可以随意发布更优雅的解决方案。

一点也不优雅，但到目前为止，我得到的结果比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%的效率。

---

所有人都可以发布更优雅的解决方案。

尝试将所有输入内容包装在一个具有类行流体的div中。因为任何

输入

都会使用

span*

类删除偏移量。请尝试将所有输入包装到具有类行的div中。因为偏移量是用

span*

类从任何

输入中删除的。仍然不起作用（我希望两个输入在同一行上），这一个几乎起作用。“几乎”，因为“.span4 offset2”输入没有完全对齐它应该对齐的位置。我已经找到了一种非优雅的方式，让所有的人都正确地联合起来。我现在将其作为答案发布。嘿，我不知道如何在新发布的答案中将
行
类添加到
中，使最后一行中的控件完全对齐。不需要将其添加到最后一行的第二行。静态代码很难看，也很奇怪！；）没有足够的声誉，因此无法将其作为对您答案的评论发布！：/仍然不起作用（我希望两个输入在同一行上），这一个几乎起作用。“几乎”，因为“.span4 offset2”输入没有完全对齐它应该对齐的位置。我已经找到了一种非优雅的方式，让所有的人都正确地联合起来。我现在将其作为答案发布。嘿，我不知道如何在新发布的答案中将
行
类添加到
中，使最后一行中的控件完全对齐。不需要将其添加到最后一行的第二行。静态代码很难看，也很奇怪！；）没有足够的声誉，因此无法将其作为对您答案的评论发布！：/但在更新的小提琴中，偏移输入显示在新行上。我希望将它们显示在与前两行相同的行上。有没有办法做到这一点？哦，我只是改变了屏幕大小，看看问题。让我来解决它。你想保留控制类吗？是的，为了让它对你更具挑战性，呵呵：）只是为了“挑战”而对代码做了一些修改而已但在更新的小提琴中，偏移输入显示在新行上。我希望将它们显示在与前两行相同的行上。有没有办法做到这一点？哦，我只是改变了屏幕大小，看看问题。让我来解决它。你想保留控制类吗？是的，为了让它对你更具挑战性，呵呵：）只是为了“挑战”而对代码做了一些修改而已
...
<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>
...