引导程序3-列高2行 [英] Bootstrap 3 - Having a column the height of 2 rows

问题描述

我正在尝试进行布局，其中一列是两行的高度.我似乎无法找到以前的答案作为正确的问题.

我正在使用Bootstrap 3.

这是代码

 < div class ="container">< div style ="margin:100px"><！--- spacer-></div>< div class ="row">< div class ="col-lg-8 col-md-8 col-sm-12" id ="top-row"></div>< div>< div class ="col-lg-8 col-md-8 col-sm-12" id ="bottom-row"></div>< div class ="row">< div class ="col-lg-4 col-md-4 col-sm 12" id ="quote-2-high"></div></div></div>< div style ="margin:100px"><！--- spacer-></div></div><！-额外的结束div吗?-> 

还有一些CSS

 #top-row {背景颜色:石灰；高度:250像素；}#bottom-row {背景颜色:粉红色；高度:250像素；}#quote-2-high {背景色:浅绿色;高度:500像素；} 

如果有什么用，我在这里有一个Codepen.

I am trying to do a layout where a column is the height of two rows. I can't seem to as the correct question to find previous answers.

I am using Bootstrap 3.

Here is the code

<div class="container">
    <div style="margin:100px">
        <!---spacer-->
    </div>

    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12" id="top-row"></div>
    <div>

    <div class="col-lg-8 col-md-8 col-sm-12" id="bottom-row"></div>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm 12" id="quote-2-high"></div>
    </div>
</div>

<div style="margin:100px">
    <!---spacer-->
</div>

</div> <!-- extra closing div ? -->

And some CSS

#top-row {
  background-color: lime;
  height: 250px;
}

#bottom-row {
  background-color: pink;
  height: 250px;
}

#quote-2-high {
  background-color: aqua;
  height: 500px;
}

I have a codepen here if it is of any use. http://codepen.io/steeth/pen/gPVwMK?editors=1100

As you can see the blue column starts at the top of the red, but I want to to start at the top of the green.

解决方案

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-8">
            <div class="row" id="top-row"></div>
            <div class="row" id="bottom-row"></div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4" id="quote-2-high"></div>
    </div>
</div>

The Bootstrap Grid System it is a very simple concept, but I recommend you to use this tool, it will help you so much: http://shoelace.io/

---

这篇关于引导程序3-列高2行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！