将col-md-2再次划分为两半并不起作用

Question

我正在尝试将col-md-4再次划分为col-md-6和col-md-6，而我的预期不能正常工作，以获得两个col-md-6同一行。但我得到col-md-6下面的第二个first col-md-6。

这是我的HTML

 <div class="col-md-1" style="background-color:lavender;">.col-md-2
    <div class="col-md-10" style="background-color:red;">
        red
    </div>
    <div class="col-md-1" style="background-color:green;">
        green
    </div>
  </div>

Here是说明这个问题的小提琴。请更新出错或者是否应该以其他方式实现。

Answer 1

要使引导网格系统正常工作，格式应为row > col + col。在您的代码中，您没有row类的任何元素。

Bootstrap还为超小型设备，小型设备，大型设备预定义了类，您应该根据需要适当地使用它们。

阅读有关Bootstrap网格系统here的更多信息，以便更好地理解它。

因此，这应该有效：

<div class="container-fluid">
    <h1>Hello World!</h1>
    <p>Resize the browser window to see the effect.</p>

    <div class="row" style="background-color:lavender;">
        <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6" style="background-color:red;">
            red
        </div>
        <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6" style="background-color:green;">
            green
        </div>
    </div>
</div>

注意col-md-6，col-sm-6等。它们都定义了这些div在不同设备上的外观。在官方的Bootstrap网站上查看这个example演示。为了便于将来快速参考，我将在此处留下此屏幕截图（解释这些类）：

以下是您更新的 Fiddle

Answer 2

你需要在div class =“col-md-1”中放一个div class =“row”

 <div class="col-md-1" style="background-color:lavender;">.col-md-2
   <div class="row">
     <div class="col-md-10" style="background-color:red;">
         red
     </div>
     <div class="col-md-1" style="background-color:green;">
         green
     </div>
   </div> 
 </div>

Answer 3

如果我没错，你想要这个吗？ Click to see

  <div class="container-fluid">
   <h1>Hello World!</h1>
    <p>Resize the browser window to see the effect.</p>

    <div class="row">
    <div class="col-md-2">
    <div class="col-md-10" style="background-color:red; float:right">
        red
    </div>
    <div class="col-md-1" style="background-color:green; float:right">
        green
    </div>
  </div>
</div>

Answer 4

你需要使用YES类，试试这个：

.row

有关详细信息，请查看此link