Bootstrap list-group-item, which is a line past the panel border
I am trying to have a grid inside a list box item. It works, but my list-list item goes past the pane borders on the left and right. Can anyone tell me why it is passing borders?
Here is a jsfiddle .
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading h4">Leagues</div>
<ul class="list-group">
<li class="row list-group-item">
<a class="col-sm-2" ng-href="#">Name</a>
<a class="col-sm-2" ng-href="#">Tweak Roster</a>
<a class="col-sm-2" ng-href="#">This Week Matchup</a>
</li>
<li class="row list-group-item">
<a class="col-md-3" ng-href="#">Name</a>
<a class="col-md-3" ng-href="#">Tweak Roster</a>
<a class="col-md-3" ng-href="#">This Week Matchup</a>
</li>
</ul>
</div>
</div>
+3
source to share
2 answers
because of the class row
- remove it and its negative margin will no longer be applied toli
<li class="list-group-item">
<a class="col-md-3" ng-href="#">Name</a>
<a class="col-md-3" ng-href="#">Tweak Roster</a>
<a class="col-md-3" ng-href="#">This Week Matchup</a>
</li>
is this what you mean? FIDDLE
+3
source to share
Change your markup to
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
<div class="container-fluid">
<div class="container panel panel-default">
<div class="panel-heading row">
<h4 class="panel-title col-md-12">Leagues</h4>
</div>
<ul class="list-group">
<li class="row list-group-item">
<a class="col-sm-2" ng-href="#">Name</a>
<a class="col-sm-2" ng-href="#">Tweak Roster</a>
<a class="col-sm-2" ng-href="#">This Week Matchup</a>
</li>
<li class="row list-group-item">
<a class="col-md-3" ng-href="#">Name</a>
<a class="col-md-3" ng-href="#">Tweak Roster</a>
<a class="col-md-3" ng-href="#">This Week Matchup</a>
</li>
</ul>
</div>
</div>
or
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
<div class="container-fluid">
<div class="container panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Leagues</h4>
</div>
<ul class="list-group">
<li class="row list-group-item">
<a class="col-sm-2" ng-href="#">Name</a>
<a class="col-sm-2" ng-href="#">Tweak Roster</a>
<a class="col-sm-2" ng-href="#">This Week Matchup</a>
</li>
<li class="row list-group-item">
<a class="col-md-3" ng-href="#">Name</a>
<a class="col-md-3" ng-href="#">Tweak Roster</a>
<a class="col-md-3" ng-href="#">This Week Matchup</a>
</li>
</ul>
</div>
</div>
+6
source to share