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

我是Bootstrap的新手，并且无法根据需要实现的CSS来修改CSS。基本上我需要8个项目符号，其中子弹是一个很棒的字体图标，文本的长度也是不同的。我在正确的定义4发子弹在左边，4这样的理想：需要使用Bootstrap将文本放入2列？

我看遍了诶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; 
}

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

我该如何解决这个问题？

来源

2016-08-18 skyguy

您好。只是检查你的问题是否成功解决？如果是这样，你能否选择其中一个答案来标记为正确的;这可以防止此问题出现在“未答复”选项卡上。如果没有，请列出您仍然面临的任何问题，以便我可以尝试进一步帮助您。干杯! –

删除点.col-md-6 - >col-md-6类

来源

2016-08-18 01:56:30 Prozi

你的div类被写成<div class="col-lg-6 .col-md-6 text-left">。我相信你知道这一点，但是当在HTML中引用类时，他们不应该有前面的句号。因此，.col-md-6 CSS声明不适用于div。

来源

2016-08-18 02:07:38

这个可以尝试

<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>

来源

2016-08-18 02:18:18

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

回答

相关问题