Bootstrap 3在行内改变<ul>高度

Question

在内排，我有列表，每个<li>标记都设置了左右边框。

<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>

现在，我需要在行内设置ul.test高度为100％，从行中删除填充顶部和填充底部，然后<li>标记的边框将从行的顶部到底部保留。< / p>

我尝试了一些带行填充的想法，列表高度但没有成功

Answer 1

根据bootstrap docs，您需要.col-*-*作为.row的直接子女

然后您需要从margin-bottom

中移除ul和padding-left/right的引导默认.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>