부트 스트랩 패널을 왼쪽에서 오른쪽으로 나누어 정렬하고 내용 패널을 추가하는 방법은 무엇입니까?

Question

나는 그 방법에 패널을 분류하기 위해 노력하고있어 :

image screen - please enter to see:

하지만 6 개 이상의 열을합니다 (9의) 있어요. LEFT에 4, RIGHT에 4, CONTENT에 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:

누구 아이디어가 어떻게 정렬했다합니까? 각 솔루션에 감사드립니다!

Answer 1

이와 같은 레이아웃을 찾으십니까? 이 경우 세 개의 열을 만들고 왼쪽과 오른쪽 열에 네 개의 패널을 넣는 것이 좋습니다. 또한 패널 (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>