css - 作为一行的 Bootstrap 列表组元素超出了面板边框

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

将您的标记更改为此

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