Bootstrap Jumbotrons并排

Question

我正在构建一个网页，目标网页有两个门户网站。我想用jombotrons作为门户网站。我想并排两个jumbotrons。我想如果我把它们放在一个行div中，并给他们col-mid-6类，这会给我带来理想的效果。但是，它们只跨越页面，然后堆叠。任何帮助将非常感谢。我对css和bootstrap很新。

<div class="row">
    <div class="container">
        <div class="jumbotron text-center col-mid-6">
            <h1>Become Awesome</h1>
            <p>Here you will learn how to become awesome.</p>
            <a class="btn btn-danger pull-right" href="{% url 'awesome_info' %}">More Info</a>
        </div>

        <div class="jumbotron text-center col-mid-6">
            <h1>Here you will learn how to become super rad.</h1>
            <p>Tubular dude.</p>
            <a class="btn btn-success" href="{% url 'rad_info' %}" role="button">More Info</a>
        </div>
    </div>
</div>

Answer 1

正确的班级是col-md-6。

这样你的jumbotron宽度就像 here

如果您希望高度相等，请为container类提供一个css属性，例如：

.container{
    display: flex
}

结果为like this

Answer 2

你的div中有拼写错误。 Bootstrap调用col-md-6类，而不是col-mid-6类。

<div class="jumbotron text-center col-md-6"></div>

Answer 3

您应该将div.container放入div.row中，然后编写此CSS属性

.container{ display: flex }