Question

当我遇到问题时，我正在阅读Bootstrap教程。这可能很愚蠢，但我无法解决。我在一个行类中有一篇文章和一个侧栏，每个栏目有9列和3列。文章的背景颜色（蓝色）在文本正下方完成，我希望它适合侧栏的高度。在教程中并没有发生，但在任何时候他都解释了原因。如果你能帮助我，我很高兴。

<section class="main row">
        <article class="color1 col-xs-12 col-sm-8 col-md-9">
            <h3>Article</h3>
            <p>
                Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.
            </p>
        </article>
        <aside class="color2 col-xs-12 col-sm-4 col-md-3">
            <h3>Sidebar</h3>
            <p>
                Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.
            </p>
        </aside>
    </section>

所有代码都在容器类中。我的.color1和.color2类只定义了背景颜色。

附上图片以帮助我理解我的想法。 Image with indication

Answer 1

您可以添加以下样式：

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

并将row-eq-height添加到您的部分元素<section class="main row row-eq-height">

如何调整背景颜色？引导

1 个答案: