如何在Bootstrap网格中添加列表项之间的差距？

Question

I'm trying to make a two tiered horizontal list in bootstrap. It's like a secondary nav that will sit below the page header (so it won't be wrapped in nav tags).

I'm trying to do it using a list, but am having trouble with the spacing. Since it needs to be 4 items wide (4 on top, 4 on bottom) I'm making each list-item into a col-md-3 (because 12/4 = 3).

So far, I can get them to line-up horizontally but I can't figure out a way to get any separation between them without pushing the 4th item down to the next level. I've been using margin to get some space between them, but like I said, that only breaks it.

Here's the code...

 .secondary-nav-container { ul.list-group:after { clear: both; display: block; content: ""; } .list-group-item { float: left; border-left: 0 none; border-right: 0 none; border-bottom: 0 none; margin: 0px; padding: 10px 0px; } a { //nothing here yet } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <div class="secondary-nav-container container"> <div class="row"> <ul class="list-group"> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> </ul> </div> </div> 

The goal is to have two rows with 4 list-items in each that takes up the full width of the row, and stacks on top of each other. With spacing between each list-item so it doesn't look like there is just one giant horizontal line across the top of each row — there needs to be space between each list-items horizontal line at the top.

Answer 1

It's best to not mix grid elements and style elements. Since your list requires it, you'll need to move some styles to the anchors rather than the list items:

 ul.list-group:after { clear: both; display: block; content: ""; } .list-group-item { float: left; border: 0 !important; margin: 0px; padding: 10px 0px; } a { display: block; padding: 5px; border: 1px solid pink; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <div class="secondary-nav-container container"> <div class="row"> <ul class="list-group"> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> <li class="col-xs-3 list-group-item"><a href="#">One</a></li> </ul> </div> </div>