pavlenko pavlenko - 5 months ago 16
CSS Question

Bootstrap 3 change <ul> height inside row

inside row, I have list, and each

<li>
tag has set left and right border.

<div class="container>
<div class="row>
<ul class="list">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>
</div>

<style>
ul.list > li {
border-right:1px solid #eeeeee;
border-left:1px solid #eeeeee;
}
</style>


enter image description here
Now, I need to set ul.test height to 100% inside row,to remove padding-top and padding-bottom from row,then borders for
  • tags will stay from top to bottom of row.

    I try couple ideas with row padding,with list height but no success

  • Answer

    According to bootstrap docs you need to have .col-*-* as a direct child of .row

    Then you need to remove bootstrap default margin-bottom of ul and padding-left/right from .col-*-*

    .row {
      background: red
    }
    .container ul {
      background: lightgreen;
      margin-bottom: 0
    }
    .container li {
      border: solid #eee;
      border-width: 0 1px;
      display: inline-block;
      /* demo */
      padding:0 5px;
      margin:0 5px
    }
    
    .container div[class^="col-"] {
      padding: 0
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <ul class="list">
            <li><a href="#">1</a>
            </li>
            <li><a href="#">2</a>
            </li>
            <li><a href="#">3</a>
            </li>
            <li><a href="#">4</a>
            </li>
          </ul>
        </div>
      </div>
    </div>