2015-05-21 1 views
0

Я использую четыре панели в макете, каждая по всей ширине. Они хорошо складываются в виде sm и xs. Я установил, чтобы панели не имели стиля, когда в md и lg видны размеры, которые работают так, как должны.Bootstrap 3 панели в отзывчивом виде

Как я могу заставить их отображать свернутые, когда только в виде sm и xs? В настоящее время они открыты, что нормально, но учитывая высоту некоторых данных, было бы лучше, если бы у меня могло быть свернуто начальное состояние.

Невозможно поместить здесь код, поскольку он заполнен множеством других баз данных, js и других вещей, поскольку мы все еще строим его и не очищали в файлах.

+0

На стороне записки, я знаю, используя класс «в» делает их открытыми. Если я удалю этот класс, они будут свернуты в размере md и lg, чего я не хочу. – kylebellamy

+1

Если вы не можете ввести код здесь, мы не сможем ответить здесь! – DavidG

+0

И все же есть ответ ниже ... – kylebellamy

ответ

6

1) нужно div class="row"

2) col-xs- является авто, для всех не нужно звонить другим col-sm, md или lg все равно будет работать, как Col-хз, Col-см, Col-мд и и цв -lg посмотреть здесь Grid-options

<div class="row"> 
    <div class="col-xs-3"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       Basic panel example 
      </div> 
     </div> 
    </div> 
    <div class="col-xs-3"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       Basic panel example 
      </div> 
     </div> 
    </div> 
    <div class="col-xs-3"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       Basic panel example 
      </div> 
     </div> 
    </div> 
    <div class="col-xs-3"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       Basic panel example 
      </div> 
     </div> 
    </div> 
</div> 

Теперь, если вы хотите отобразить только для Col-Lg и Col-мд

Вам нужно это:

<div class="row"> 
    <div class="col-md-6 col-lg-6 visible-md visible-lg hidden-xs hidden-md"> 

    </div> 
</div>