Question

我将这些面板放在不同的行中。为了方便地显示我的问题和我想要的输出，这是一个视觉......

左侧是我遇到的问题，右侧是所需的输出。我想知道如何使右面板与另一行重叠。

我的html结构是这样的，它都在一个.container-fluid中（如果这导致了这个问题）......

<div class="row">
    <div class="col-md-6">
        <div class="panel">  <!-- top-left panel --> </div>
    </div>
    <div class="col-md-6">
        <div class="panel"> <!-- right panel --> </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="panel">  <!-- bottom-left panel -->  </div>
    </div>
</div>

我正在使用bootstrap。

P.S。对不起html＆＃34;示例＆＃34;，还不熟悉如何使用html代码段

Answer 1

使用flex

.flex{
  display:flex;
}

.flex-1{
  flex:1;
}

.height-50{
  height:50px;
}

.margin-r-15{
  margin-right:15px;
}

.border-1px{
  border:1px solid black;
}

<div class="flex">
  <div class="flex-1 margin-r-15">
    <div class="height-50 border-1px" >
    </div>
    <div class="height-50 border-1px">
    </div>
  </div>
  <div class="flex-1 border-1px">
  </div>
</div>

Answer 2

您可以在一个包装器中编写左侧div，在另一个包装器中编写正确的代码。

<强> HTML

<div class="row">
    <div class="col-md-6">
        <div class="panel">
            //top left panel
        </div>
        <div class="panel">
            // bottom left panel
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel">
            // right panel
        </div>
    </div>
</div>

根据您的视觉效果，上面的html会很好，但高度不会在此管理。

如果您希望根据左侧主框具有相同的右侧框高度，请使用以下代码

<强> HTML

<div class="row main">
    <div class="col-md-6 inner">
        <div class="panel">
            //top left panel
        </div>
        <div class="panel">
            // bottom left panel
        </div>
    </div>
    <div class="col-md-6 inner">
        <div class="panel">
            // right panel
        </div>
    </div>
</div>

<强> CSS

.main{
  display:flex;
}

Answer 3

请尝试这样：

   <div class="row">
    <div class="col-md-8">
    <div class="row">
    <div class="col-md-12"></div>
    </div>
    <div class="row">
    <div class="col-md-12"></div>
    </div>
    </div>
    <div class="col-md-3">
    <div class="row">
    <div class="col-md-12"></div>
    </div>
    </div>
    </div>

Answer 4

如果您可以使用单独的列（如Gaurav的答案中所示），那将起作用。如果面板的高度未知（可变），这不是一个简单的方法。另一种选择是将所有cols放在一个row中并使用CSS3列宽..

  .row {
     -moz-column-width: 50em;
     -webkit-column-width: 50em;
     -moz-column-gap: .1em;
     -webkit-column-gap: .1em; 
   }

  .col-md-6 {
     float:none;
     display: inline-block;
     margin: .1em;
     width: 100%;
   }

http://www.bootply.com/6ynLAwenzq

Answer 5

Please try this:
<div class="row">
    <div class="col-lg-8 col-md-8 col-xs-12 col-s-12">
        <div class="col-lg-12 col-md-12">
    //Your Content Here
        </div>
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
           //Your Content Here
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
            //Your Content Here
        </div>
    </div>
</div>

如何将面板从一行重叠到另一行？

5 个答案: