如何让'li'的宽度在同一列中相同，但不同的行，bootstrap？

我正在使用angularJS和bootstrap。我不想使用表格，所以我使用div标签。我有一行标题，并有一行数据。该行是动态的，我的意思是它使用ng-repeat从服务中调用数据。我的问题是在标题行和数据单元宽度的数据单元格的宽度在其它行不相等像table.Here一些代码例如：如何让'li'的宽度在同一列中相同，但不同的行，bootstrap？

.attributeHeaderList { 
    padding: 0; 
    margin: 0; 
    background-color: #d6d6d6; 
    text-align: center; 
    text-decoration: none; 
} 

.attributeList { 
    padding: 0; 
    margin: 0; 
    text-align: center; 
    text-decoration: none; 
} 

.attributeHeaderList li, .attributeList li { 
    border-right-style: inset; 
    line-height: 35px; 
} 

.attributeHeaderList li:last-child, .attributeList li:last-child { 
    border-right: none; 
}

<div class="row" id="attrHeaders"> 
    <div class="col col-sm-7 col-md-8 col-lg-8" id="attrHeadersChild"> 
     <ul class="nav-justified attributeHeaderList"> 
      <li >Age</li> 
      <li>Gender</li> 
      <li>Weight</li> 
     </ul> 
    </div> 
</div> 

<div> 

    <div class="col col-sm-7 col-md-8 col-lg-8"> 
     <ul class="nav-justified attributeList"> 
      <li>24</li> 
      <li>m</li> 
      <li>80</li> 
     </ul> 
    </div> 
</div>

这是结果。我想要列具有相同的宽度。为了更好的观看，请使用EXPAND SNIPPET按钮。感谢您的帮助。

来源

2017-03-06 Caner

您可以使用引导电网实现his.Do你知道怎么样？ – Jarek

是的，我知道自举网格。但你能举个例子吗？ – Caner

我用工作片段回答您。 – Jarek

在这里，你有工作片断：

.attributeHeaderList { 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #d6d6d6; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 

 
.attributeList { 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 

 
.attributeHeaderList li, .attributeList li { 
 
    border-right-style: inset; 
 
    line-height: 35px; 
 
} 
 

 
.attributeHeaderList li:last-child, .attributeList li:last-child { 
 
    border-right: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
<div class="row" id="attrHeaders"> 
 
    <div class="col col-sm-7 col-md-8 col-lg-8" id="attrHeadersChild"> 
 
     <ul class="row list-inline attributeHeaderList"> 
 
      <li class="col-xs-4">Age</li> 
 
      <li class="col-xs-4">Gender</li> 
 
      <li class="col-xs-4">Weight</li> 
 
     </ul> 
 
    </div> 
 
    <div class="col col-sm-7 col-md-8 col-lg-8"> 
 
     <ul class="row list-inline attributeList"> 
 
      <li class="col-xs-4">24</li> 
 
      <li class="col-xs-4">m</li> 
 
      <li class="col-xs-4">80</li> 
 
     </ul> 
 
    </div> 
 
</div>

来源

2017-03-06 12:51:40 Jarek

非常感谢。太好了。 – Caner

用bootstrap网格列在名单..

<div class="row" id="attrHeaders"> 
     <div class="col col-sm-7 col-md-8 col-lg-8" id="attrHeadersChild"> 
      <ul class="row list-inline attributeHeaderList"> 
       <li class="col-xs-4">Age</li> 
       <li class="col-xs-4">Gender</li> 
       <li class="col-xs-4">Weight</li> 
      </ul> 
     </div> 
     <div class="col col-sm-7 col-md-8 col-lg-8"> 
      <ul class="row list-inline attributeList"> 
       <li class="col-xs-4">24</li> 
       <li class="col-xs-4">m</li> 
       <li class="col-xs-4">80</li> 
      </ul> 
     </div> 
    </div>

另外，不要使用nav-justified因为这将使依赖于他们的内容LI不同的宽度。

http://www.codeply.com/go/DMjvcwF648

来源

2017-03-06 12:03:49 ZimSystem

如何让'li'的宽度在同一列中相同，但不同的行，bootstrap？

回答

相关问题