html - 按列添加一个具有不同颜色的公共(public)背景框，以 Bootstrap 行

Question

我现在正在学习 bootstrap，并且正在尝试制作一个简单的网站。我创建了一个包含 3 列的行(大小:3、6、3)，每一列都有自己的文本元素。我希望第一列和最后一列为红色，中间为灰色。我在 css 中使用背景颜色来执行此操作，但我看到颜色包络在文本元素周围。有没有办法快速添加不同颜色但相同高度的条形图？ image here可能有助于更好地理解问题。我可以创建一个带有栏的新 Bootstrap 行并将其添加到它们后面，但想知道是否有更简单的解决方案。 html和css如下。

<div class="aboutbar">
    <div class="container">
        <div class="row">

            <div class="leftbar">
                <div class="col-xs-3">
                    <h3> 231 </h3>
                    <p>Enthusiasts</p>
                </div>
            </div>

            <div class="middlebar">
                <div class="col-xs-6">
                    <h3><a href="#"> Kanye West</a></h3>
                    <p> Kanye Omari West is an American hip hop recording artist, record producer, rapper, fashion designer, and entrepreneur.West is one of the best-selling artists of all time, having sold more than 32 million albums and 100 million digital downloads worldwide.
                </div>
            </div>

            <div class="rightbar">
                <div class="col-xs-3">
                    <ul style="list-style:none;">
                        <li class="emphasis"> Follow </li>
                        <li> Events </li>
                        <li> Blog </li>
                    </ul>

CSS:

    .leftbar .col-xs-3 {
    background-color:red;
    color:white;
}

.middlebar .col-xs-6 {
    background-color:grey;
    color:white;
}

.rightbar .col-xs-3 {
    background-color:red;
    color:white;
}

提前致谢!

Answer 1

为列设置相同的高度是一个很常见的问题。 我使用了一个 jquery 插件，强制行的所有列具有相同的高度。

http://brm.io/jquery-match-height/