Boostrap没有创建4列

Question

这可能很简单，但我是bootstrap的新手，并不熟悉它的工作原理。我有以下代码连续创建4个偶数宽度的列。但它一直在我的笔记本电脑上显示为4个垂直堆叠的列（1920x1080），而且我不太确定我在哪里做错了。

 <div class="container">
            <div class="row-fluid">
                <div class="col-md-3"><!--about us feature 1st -->
                    <div class="about-block">
                        <div class="heading">
                            <h6>AVAILABILITY</h6>
                            <p>Fast Response Time<br> 15 Minutes Setup</p>
                        </div>
                    </div>
                </div><!--about us feature 1st closed -->
                <div class="col-md-3"><!--about us feature 2nd -->
                    <div class="about-block">
                        <div class="heading">
                            <h6>SPEED</h6>
                            <p>Average 7x Faster<br> Complete Data Coverage</p>
                        </div>
                    </div>
                </div> <!--about us feature 2nd closed -->
                <div class="col-md-3"><!--about us feature 3rd -->
                    <div class="about-block">
                        <div class="heading">
                            <h6>SAFETY</h6>
                            <p>Reduce Human Risk<br> No Scaffolding</p>
                        </div>
                    </div>
                </div><!--about us feature 3rd closed -->
                <div class="col-md-3"><!--about us feature 4th -->
                    <div class="about-block">
                        <div class="heading">
                            <h6>COST SAVINGS</h6>
                            <p>Targeted Repairs<br> Less Outage Time</p>
                        </div>
                    </div>
                </div><!--about us feature 4th closed -->
            </div>
        </div>

更新添加了屏幕截图：

Answer 1

使用col-sm-3代替，或者使<div>元素更宽。如果你直接在体内使用容器，你应该没有任何问题。如果您在另一个元素中使用，请确保它足够宽。

Answer 2

首先，尝试将row-fluid课程更改为style="float: left"。其次，（理论上）屏幕被划分为12，但3 * 4可能超过12（边距，边界等）。如果第一部分呈现三列而第四部分呈现在下面，请尝试通过设置减小列的大小，例如，宽度= 24％。