我正试图按照这种方式对面板进行排序：
image screen - please enter to see:
但我有超过6列（它是9）。我期待在左侧设置4，在右侧设置4，在内容设置1。
我的代码是：
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Turnieje, w kórych jesteś zawodnikiem:</div>
<div class="panel-body">
<ul>
{% for playerT in playersT %}
<li><a href="{% url 'tournament' playerT.tournament_id.id %}">{{playerT.tournament_id.name}}</a>
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer"><a href="{% url 'home' %}" class="btn btn-default">Przeglądaj wszystkie</a>
</div>
</div>
</div>
<div class="col-md-push-2 col-md-4 ">
<div class="panel panel-primary">
<div class="panel-heading">Turnieje, w których jesteś trenerem:</div>
<div class="panel-body">
<ul>
{% for tournament in ctournaments %}
<li><a href="{% url 'tournament' tournament.id %}">{{tournament.name}}</a></li>
{% endfor %}
</ul>
</div>
<div class="panel-footer"><a href="#" class="btn btn-default">Przeglądaj wszystkie</a></div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Twoje turnieje:</div>
<div class="panel-body">
<ul>
{% for tournament in mtournaments %}
<li><a href="{% url 'tournament' tournament.id %}">{{tournament.name}}</a></li>
{% endfor %}
</ul>
</div>
<div class="panel-footer"><a href="#" class="btn btn-default">Przeglądaj wszystkie</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Twoje drużyny:</div>
<div class="panel-body">
<ul>
{% for team in teams %}
<li><a href="{% url 'team' team.id %}">{{team.name}}</a></li>
{% endfor %}
</ul>
</div>
<div class="panel-footer"><a href="#" class="btn btn-default">Przeglądaj wszystkie</a></div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenie do drużyny:</div>
<div class="panel-body">
<ul>
{% if playerteam %}
<li>{{ playerteam.team_id.name }} <a href="{% url 'playerToTeamAccept' playerteam.id %}">
Akceptuj </a></li>
{% endif%}
</ul>
</div>
<div class="panel-footer"><a href="#" class="btn btn-default">Przeglądaj wszystkie</a></div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenia dla Twoich zawodników do turnieju:</div>
<div class="panel-body">
<ul>
{% for player in AplayersT %}
<li>{{ player.tournament_id.name }} <a href="{% url 'playerToTournamentAccept' player.id %}">
Akceptuj </a></li>
{% endfor%}
</ul>
</div>
<div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByC' %}" class="btn btn-default">Akceptuj
wszystkie</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zgłoszenia zawodników do Twoich turniejów:</div>
<div class="panel-body">
<table class="table table-hover table-condensed">
<br>
{% for EplayerT in EplayersT %}
<tr>
<td class="col-md-3" align="center"><a
href="{% url 'allTeamTourAcceptByM' EplayerT.player_id.team_id.id %}"> Akceptuj
drużynę {{ EplayerT.player_id.team_id.name }} </a></td>
<td class="col-md-3">Zawodnik {{ EplayerT.player_id.name }} {{ EplayerT.player_id.surname }}
zgłoszony do {{ EplayerT.tournament_id.name }}
</td>
<td class="col-md-3" align="center"><a
href="{% url 'playerToTournamentAccept' EplayerT.id %}"> Akceptuj zawodnika</a></td>
</tr>
{% endfor %}
</table>
</div>
<div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByM' %}" class="btn btn-default">Akceptuj
wszystkie</a></div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Przynależność do drużyny:</div>
<div class="panel-body">
<ul>
{% for player in players %}
<li><a href="{% url 'player' player.team_id.id %}">{{player.team_id.name}}</a>
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer"><a href="{% url 'home' %}" class="btn btn-default">Pozostałe drużyny</a>
</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenia do Twojej drużyny:</div>
<div class="panel-body">
<ul>
{% for player in players %}
<li><a href="{% url 'player' player.team_id.id %}">{{player.team_id.name}}</a>
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer"><a href="{% url 'home' %}" class="btn btn-default">Pozostałe drużyny</a>
</div>
</div>
</div>
</div>
但现在看起来：
image screen - please enter to see:
有没有人知道如何排序？感谢您的解决方案！
答案 0 :(得分：0)
你在寻找这样的布局吗？在这种情况下，我建议你创建三列，只需在左右列中放置四个面板。还具有以下优点：面板2的顶部不依赖于面板6的底部。
.box {
font-family: Arial;
font-size: 24px;
border: 1px solid #f99;
background-color: #fee;
color: #333;
padding: 10px;
height: 75px;
margin-bottom: 10px;
}
.box.box--100 {
height: 100px;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="box">1</div>
<div class="box box--100">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="col-xs-4">
<div class="box">5</div>
</div>
<div class="col-xs-4">
<div class="box box--100">6</div>
<div class="box">7</div>
<div class="box box--100">8</div>
<div class="box box--100">9</div>
</div>
</div>
</div>