Question

我是Bootstrap的新手，并且无法根据我需要实现的内容修改CSS。基本上我需要8个子弹点，子弹是一个很棒的字体图标，文本的长度各不相同。我在左边有4颗子弹，理想情况下是右边4颗：

我浏览了自己的bootstrap.css文件并创建了这个文件，因为col-lg-6 and .col-md-6的宽度都是50％，这意味着它们应该占用2列。

<div class="container">
            <div class="row">
                <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">Infrastructure & Data Center Managers</h3>
                    </div>
                </div>
                <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">Network Administrators & Engineers</h3>
                    </div>
                </div>
               <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">Architects</h3>
                    </div>
                </div>
                <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">IT Directors & Managers</h3>
                    </div>
                </div>
                <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">IT Operation Directors & Managers</h3>
                    </div>
                </div>
                <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">Virtual Server Administrators Systems Administrators</h3>
                    </div>
                </div>
                 <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">Desktop Managers</h3>
                    </div>
                </div>
                <div class="col-lg-6 .col-md-6 text-left">
                    <div class="service-box">
                        <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                        <h3 class = "listPerson">Application Managers, Administrators & Developers</h3>
                    </div>
                </div>

这实现了这个目标：

这很接近，但你可以看到第一列和第二列之间的间距太大。发生这种情况是因为因为我有不同长度的文本，所以我必须在这里设置最大宽度，这推动了第二列的思考。这是完整的CSS：

    .listPerson {
        display: inline-block;
        margin-left: 15px;
        font-family: 'proximanova-reg';
        font-size: 20px;
    }

.service-box {
  max-width: 490px;
  margin-right: 0px;
}
.col-lg-6 {
    width: 50%;
  }
.col-md-6 {
    width: 50%; /*Both cols have float: left also*/
  }
.row {
  margin-right: -15px;
  margin-left: -15px;
    margin-top: 45px;
}

为什么我的第一列到目前为止，即使文本没有延伸那么远？我已经尝试在服务盒和其他选择器上将padding-left和margin-left设置为0px，但没有任何工作。

我该如何解决这个问题？

Answer 1

删除点.col-md-6 - ＆gt;课程中的col-md-6

Answer 2

您的div类正在编写为<div class="col-lg-6 .col-md-6 text-left">。我确定你知道这一点，但是当HTML中引用类时，它们不应该有前面的句号。因此，.col-md-6 CSS声明未应用于div。

Answer 3

可以尝试

<div class="col-lg-6 .col-md-6 text-left">
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                    <i class="fa fa-2x fa-diamond text-primary sr-icons"></i>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <h3 class = "listPerson">Infrastructure & Data Center Managers</h3>
                    </div>
                </div>

需要使用Bootstrap将文本放入2列？

3 个答案: