将一个div放在旁边

Question

这可能是一个愚蠢的问题，但我对Bootstrap来说还不是新手，也不知道哪种方法可以解决以下问题：

我有5个div，其中一个是另一个（用粉红色填充）和另一个div（用黄色填充）。还有一条<hr/>行在div no：5之后开始。

我想要做的是将黄色div放在粉红色的div上，如下图所示：  我试图在第一行中添加长度为col-md-10的黄色div，但它看起来并不像我想要的那样。

Bootply here

感谢任何帮助。 请记住，一切都需要响应。

Answer 1

您的使用或行导致此问题。将您的box组合到一列：DEMO

<div class="container">
  <div class="row">

    <div class="col-md-2 col-xs-3 col-sm-2">
        <div class="box text-center">1</div>
        <div class="box text-center">2</div>
        <div class="box text-center">3</div>
        <div class="box text-center">4</div>
    </div>  
    <div class="col-md-10 col-xs-9 col-sm-10 yellow">  YeLLoW ? </div> 

  </div>
  <hr>
</div>

Answer 2

你需要将所有lef div包装在.col-md-2容器和黄色部分中，如

     <div class="col-md-2 box col-xs-3 col-sm-2">
       <div class="pink">div 1</div>
       <div class="pink">div 2</div>
       <div class="pink">div 3</div>
       <div class="pink">div 4</div>
       <div class="pink">div 5</div>
     </div>
     <div class="col-md-10 box col-xs-9 col-sm-10">
       <div class="yellow">yellow part</div>

     </div>

Answer 3

最好的选择是使用＆＃34; XS＆＃34;测量因为，bootstrap首先用于移动，所以考虑的第一个措施是＆＃34; xs＆＃34;一个，其余的取决于此。我的意思是，如果你只把col-xs-12，响应的结果是相同的，如果你把＆＃34; col-xs-12 col-sm-12 col-md-12，col-lg-12＆＃34 ;

出于这个原因，如果你想拥有与更小尺寸相同的视图，你可以这样使用：

    <div class="container">
  <div class="row">

    <div class="col-xs-2 text-center">
        <div class="box text-center">1</div>
        <div class="box text-center">2</div>
        <div class="box text-center">3</div>
        <div class="box text-center">4</div>
    </div>  
    <div class="col-xs-10 yellow">  YeLLoW ? </div>    
  </div>
  <hr>

</div>