如何在引导程序中设置网格布局？

Question

我制作了一个旋转木马，在它下面，我想要显示3个网格，但它们是重叠的。如何设置网格样式以使它们不重叠。 这是我的代码：

<div id="main-content">
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4"> 
            <span class="glyphicon glyphicon-cloud"></span>
            <h3>Enter title of news</h3>
            <p>your news description</p>
        </div>
        <div class="col-md-4"> 
            <span class="glyphicon glyphicon-cloud"></span>
            <h3>Enter title of news</h3>
            <p>your news description</p>
        </div>
        <div class="col-md-4"> 
            <span class="glyphicon glyphicon-cloud"></span>
            <h3>Enter title of news</h3>
            <p>your news description</p>
        </div>

    </div>
</div>
</div>

在css中：

#main-content {
    position: absolute;
    top: 800px;
}

Answer 1

如果我认为这就是你所要求的：你想要导航栏，在旋转木马下方，并在3“网格”下方并排，不重叠？如果您在导航栏的代码后面插入它，这应该有效：

<div class="container">
    <div class="row">
        <div class="col-sm-12>
            <!-- CODE FOR CAROUSEL -->
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <!-- GRID 1 -->
        </div>
        <div class="col-sm-4">
            <!-- GRID 2 -->
        </div>
        <div class="col-sm-4">
            <!-- GRID 3 -->
        </div>
    </div>
</div>