我正在使用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按鈕。感謝您的幫助。
您可以使用引導電網實現his.Do你知道怎麼樣? – Jarek
是的,我知道自舉網格。但你能舉個例子嗎? – Caner
我用工作片段回答您。 – Jarek