Question

我想使用像这样的bootstrap创建一个div组。

 -------------------------------
|                               |
|   |first div |  |  main  |    |
|                 |  div   |    |
|   |second div|  |        |    |
|                               |
 -------------------------------

因此，在较小的屏幕上，它看起来像：

 ------------------
|                  |            
|   |first div |   | 
|                  |    
|   |   main   |   |      
|   |   div    |   |
|   |          |   |
|                  |
|   |second div|   |
|                  |
 ------------------

有可能吗？
如果是，那么请指导我。

Answer 1

据我所知，如果你想改变这样的方向，可能会有点棘手的JavaScript。

所以如果我把它翻译成Bootstrap，它看起来就是这样。

 -------------------------------
|                               |
|   |first div |  |  main  |    |
|                 |  div   |    |
|   |second div|  |        |    |
|                               |
 -------------------------------

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-xs-12">
            <div class="row">
                <div class="col-xs-12">
                    first div
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    second div
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-12">
            main div
        </div>
    </div>
</div>

然后在移动设备中看起来像。

 ------------------
|                  |            
|   |first div |   | 
|                  | 
|   |second div|   |
|                  |
|   |   main   |   |      
|   |   div    |   |
|   |          |   |
|                  |
|                  |  
|                  |
 ------------------

Bootstrap还提供col-pull和col-push，但它只适用于同一行中的项目，所以除非第一个div以某种方式具有相同的高度，否则不会出现这种情况主要的div我们可以把这两个分成一排。

让我找到合适的解决方案并尽快回来：）

Answer 2

尝试使用：

＆＃13;

.col {
   float: left;
    margin: 20px;
    padding-bottom: 100px;
    margin-bottom: -100px;
}
.div-1{
    background: #ccc; 
}
.div-2{
    background: #ddd;
}
.div-3{
    background: #eee;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-12 div-1 col">First Div</div>
    <div class="col-md-8 col-xs-12 div-2 col">Main Div</div>
    <div class="col-md-3 col-xs-12 div-3 col">Second Div</div>
  </div>
</div>

＆＃13;

Check here for demo

Answer 3

对于严格的位置顺序，您需要使用POSITION：ABSOLUTE并定义TOP LEFT WIDTH HEIGHT属性。然后在CSS媒体查询上，根据您的需要重新定位TOP LEFT WIDTH HEIGHT。

更改div更改页面大小的位置

3 个答案: