bootstrap list-group-item是一行,超出了面板边框

Question

我试图在list-group-item中有一个网格.它正在工作,但我的list-group-item正在向左和向右延伸超过面板边框.任何人都可以告诉我为什么它越过边界？

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