Bootstrap 3两个彼此相邻的响应行？

-1

我正在使用Bootstrap 3并试图解决这个模拟图像上的问题。我使用了一行两列，它们像图像一样彼此相邻，但是当我调整到移动时，我想让右侧落在左下方。任何帮助表示赞赏，谢谢。 Bootstrap 3两个彼此相邻的响应行？

代码示例：

<div className="container"> 
    <div className="row"> 
    <div className="col-xs-4 col-offset-xs-1"> 
    <h1>1</h1> 
    </div> 
    <div className="col-xs-4"> 
    <div className="row"> 
     <h1>2</h1> 
    </div> 
    </div>

来源

2016-09-28 NewbieOnRails

代码示例在哪里？ – Justinas

.black{background-color:#000; height:320px;} 
 
.red{background-color:#F00; height:100px;margin-bottom:10px;}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <div class="row"> 
 
     <div class="col-xs-12 black"> 
 
      black 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <div class="row"> 
 
     <div class="col-xs-12 red"> 
 
      one 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-12 red"> 
 
      two 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-12 red"> 
 
      three 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div>

来源

2016-09-28 10:44:59 JoelBonetR

谢谢。很棒！ – NewbieOnRails

它不会移动* xs屏幕*下面的容器*的右半部分。 –

基本上只是复制并粘贴我的答案，并添加了一些CSS，很好的工作！ – timothyclifford

引导允许嵌套，将提供你所需要的：

<div class="row"> 
    <div class="col-sm-6"> 
    Left column 
    </div> 
    <div class="col-sm-6"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     Right column, row 1 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
     Right column, row 2 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
     Right column, row 3 
     </div> 
    </div> 
    </div> 
</div>

More info here.

来源

2016-09-28 10:40:36 timothyclifford

您可以通过使用Flexbox的实现这一目标和媒体查询

@media (max-width: 360px) { 
    .container > .row { 
      display:flex; 
      flex-flow: row-reverse wrap; 
    } 
}

演示：https://jsfiddle.net/xs3joev8/1/

来源

2016-09-28 10:43:31

引导允许容易筑巢的元素，在这里你去：https://jsfiddle.net/denea/DTcHh/25594/

 <div className="container"> 
      <div class="row"> 
      <div class="col-sm-6 col-xs-12" id="first"> 
       <h1>1</h1> 
      </div> 
      <div class="col-sm-6 col-xs-12" id="second"> 
       <div class="row"> 
       <h1>2</h1> 
       </div> 
       <div class="row"> 
       <h1>3</h1> 
       </div> 
       <div class="row"> 
       <h1>4</h1> 
       </div> 
      </div> 
    </div>

和阅读：http://getbootstrap.com/css/#grid-nesting

来源

2016-09-28 10:46:38

Bootstrap 3两个彼此相邻的响应行？

回答

相关问题