Question

我正在尝试在list-group-item中包含一个网格。它正在工作，但我的list-group-item正在向左和向右延伸超过面板边框。谁能告诉我为什么它会越过边界？

＆＃13;

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

＆＃13;

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>

Answer 2

因为课程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

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

2 个答案: