bootstrap list-group-item是一行延伸過面板的邊界

Question

我想在列表組中的一個網格內。它正在工作，但是我的列表組項目正在擴展到左側和右側的面板邊界之外。任何人都可以告訴我爲什麼它延伸過邊界嗎？

這是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's 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's Matchup</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div>

Answer 1

因爲row類 - 刪除它和它的負利潤率將不再適用於li

<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's Matchup</a> 
</li> 

這是你腦子裏想的是什麼？ FIDDLE

Answer 2

您的標記改成這樣

@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's 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's Matchup</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
</div>

或本

@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's 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's Matchup</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
</div>