如何使用HTML和CSS在Boostrap上制作响应不均匀的列？

时间：2017-07-31 20:47:38

标签： html css twitter-bootstrap yii2

I want to make this using HTML and CSS:

我理解引导网格是如何工作的，但是我在创建比其余列更长的列时遇到了问题，而没有在其他行之间添加额外的空间。 （当我向中间列添加填充时，第二行的第一个框会降低）。我将在每个方框中放置链接。

谢谢！

编辑1：我正在使用Yii 2 Framework。 编辑2：添加了当前的HTML

＆＃13;
＆＃13; 
<div class="row">
  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2" >1,2,3</div>
  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">content</div>
  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">content</div>
</div>

<div class="row">
  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2"> 1,2,3</div>
  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4">1,2,3</div>
  
</div>

<div class="row">
  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">content</div>
  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4">content</div>
  
</div>
<div class="row">
  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-2 col-xs-offset-8 col-sm-offset-8 col-md-offset-8 col-lg-offset-8">content</div>
  
</div>

<div class="row">
  <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">content</div>
  
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

可悲的是，这不是Bootstrap的工作原理;你得到一行你可以放置列，你不能将另一列浮动到其他列之下，让它们像你的图一样自动调整。

我建议查看名为Masonry的jQuery插件，它有助于您正在寻找的布局。

答案 1 :(得分：1)

我认为没有任何理由可以解决这个问题。诀窍是它必须分两行完成。

第一行应包含3列。在这3列中的每一列中，您都可以创建任意数量的行。

第二行仅包含1个全宽列。

请参阅下面的代码示例以获得更好的解释：

        <div class="container">
        <div class="row" style="height:200px;">
            <div class="col-md-4" style="height: 100%;">
                <div class="row" style="height:100%;">
                    <div class="col-md-12" style="height:25%">12 Columns</div>
                    <div class="col-md-4" style="height:25%">4 Columns</div>
                    <div class="col-md-4" style="height:25%">4 Columns</div>
                    <div class="col-md-4" style="height:25%">4 Columns</div>
                    <div class="col-md-12" style="height:50%">12 Columns</div>
                </div>
            </div>
            <div class="col-md-4" style="height: 100%;">
                <div class="row" style="height:100%;">
                    <div class="col-md-12" style="height:100%">12 Columns</div>
                </div>
                <div class="row">
                </div>                      
            </div>
            <div class="col-md-4" style="height: 100%;">
                <div class="row" style="height:100%;">
                    <div class="col-md-12" style="height:25%">12 Columns</div>
                    <div class="col-md-12" style="height:25%">12 Columns</div>
                    <div class="col-md-12" style="height:25%">12 Columns</div>
                    <div class="col-md-12" style="height:25%">12 Columns</div>
                </div>
            </div>
        </div>
        <div class="row" style="height:50px;">
            <div class="col-md-12" style="height:100%">12 Columns</div>             
        </div>
    </div>

答案 2 :(得分：0)

Bootstrap4可能有助于flexbox inbricated。

不太确定这是最好的例子，它仍然需要一些额外的CSS来让它正常运行：

.container>.d-flex>.col {
  box-shadow: 0 0 0 3px turquoise;
  min-height: 1.5rem;
  height: auto!important;
  margin: 0 0 20px;
}

.w-100,
.flex-row.d-flex.col>.border {
  box-shadow: 0 0 0 3px turquoise;
}

.w-100 {
  margin: -10px 10px 20px
}

.container>.col {
  margin: 10px 0;
}

.d-flex.flex-column.col>div {
  flex: 1 0 auto;
}

.d-flex.flex-column.col>div.big {/* big or whatever classname you think meaningfull */
  flex: 1 1 100%;
}

.col .col:hover {
  font-size: 0.5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container d-flex flex-wrap flex-row">
  <div class="d-flex flex-column col ">
    <div class="d-flex  col rounded">
      AAAA
    </div>
    <div class="flex-row d-flex  col rounded">
      <div class="col">1</div>
      <div class="col border">2</div>
      <div class="col">3</div>
    </div>
    <div class="d-flex  col rounded">
      CCCC
    </div>
    <div class="d-flex  col rounded">
      DDDD
    </div>
  </div>
  <div class="d-flex flex-column col">
    <div class="d-flex  flex-column col rounded">
      <h1>hover me </h1><br/>EEEE<br/>EEEE<br/>EEEE<br/>EEEE<br/>EEEE<br/>EEEE<br/>EEEE<br/>EEEE<br/>EEEE<br/>EEEE<br/>EEEE<br/>EEEE<br/>EEEE<br/>EEEE
    </div>
  </div>
  <div class="d-flex flex-column col">
    <div class="d-flex  col rounded">
      <p>FF<br/>FF</p>
    </div>
    <div class="flex-row d-flex  col rounded">
      <div class="col">1</div>
      <div class="col border">2</div>
      <div class="col">3</div>
    </div>
    <div class="d-flex  col big  rounded">
      HHHH
    </div>
  </div>
  <div class="w-100 rounded"> IIII</div>

https://codepen.io/gc-nomade/pen/LjNroE

来自 boostrap3 结构的另一个示例以及CSS中添加的 flex规则 

.flex, .flexcol {
  display:flex;/* rule around which the flex layout is build, remove it to fall back to regular bootstrap */
}

.row {
  padding:0  20px ;
  margin:auto;
  text-align:center;
}
.flexcol {
  padding:0;
}
.colchild , .footer{
  border:solid gray;
  color:white;
  margin:10px;
  background:linear-gradient(20deg, rgba(0,0,0,0.4), rgba(255,255,255,0.4)) tomato;
  box-shadow:inset 0 0 3px, 0 0 0 3px orange , 0 0 0 6px turquoise;
}

.flexcol {
  flex-direction:column;
}
.col {
  flex:1;
  padding:1em;
}
.colchild.flex .col:nth-child(2) {
  border-left:solid gray;
  border-right:solid gray;
}
.rounded {
  border-radius:0.5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container flex">
  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4   flexcol ">
    <div class="colchild rounded">
      <p>boxe</p>
    </div>
    <div class="colchild rounded flex">
      <div class="col"> 1 </div>
      <div class="col"> 2 </div>
      <div class="col"> 3 </div>
    </div>
    <div class="colchild rounded">
      <p>boxe</p>
    </div>
    <div class="colchild rounded">
      <p>boxe</p>
    </div>
  </div>
  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4   flexcol ">
    <div class="colchild rounded col">
      <p>boxe</p>
    </div>
  </div>
  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4    flexcol ">
    <div class="colchild rounded">
      <p>boxe</p>
    </div>
    <div class="colchild rounded flex">
      <div class="col"> 1 </div>
      <div class="col"> 2 </div>
      <div class="col"> 3 </div>
    </div>
    <div class="colchild rounded col ">
      <p>bottom</p>
    </div>

  </div>
</div>
<div class="row container flex">
  <div class="footer w-100 col rounded">footer</div>

https://codepen.io/gc-nomade/pen/VzKvKv/

相关问题
最新问题