如何讓'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？

回答

相關問題