title: How can i make 'li' s width equal in the same column but different row, bootstrap?
body: <p>I am using angularJS and bootstrap. I don't want to use table so I am using div tags. I have a row for headers and there is a row for data. That row is dynamic, I mean it calls data from service using ng-repeat. My problem is the data cell width in headers row and data cell width in other rows are not equal like a table.Here some code example:</p>
  
  <pre class="lang-css prettyprint-override"><code>.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;
  }
  </code></pre>
  
  <p>
      
      
      </p>
  
  <pre><code>&lt;div class="row" id="attrHeaders"&gt;
      &lt;div class="col col-sm-7 col-md-8 col-lg-8" id="attrHeadersChild"&gt;
          &lt;ul class="nav-justified attributeHeaderList"&gt;
              &lt;li &gt;Age&lt;/li&gt;
              &lt;li&gt;Gender&lt;/li&gt;
              &lt;li&gt;Weight&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  
      &lt;div class="col col-sm-7 col-md-8 col-lg-8"&gt;
          &lt;ul class="nav-justified attributeList"&gt;
              &lt;li&gt;24&lt;/li&gt;
              &lt;li&gt;m&lt;/li&gt;
              &lt;li&gt;80&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <p>This is the result. I want columns have same width. For good viewing please use EXPAND SNIPPET button. Thanks for any helps.</p>