Bootstrap - есть строка только на маленьком устройстве

Для моей страницы планов я использую панели, содержащие контент того, что предлагает каждый план.Bootstrap - есть строка только на маленьком устройстве

Проблема, которую я имею, потому что каждая панель разного размера, при просмотре на мобильном телефоне это выглядит следующим образом:

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 1 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 2 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 3 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 4 --> </div> 
    </div> 
</div>

Я хочу, чтобы выглядеть следующим образом :

<!-- This is how I attempted to do it --> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 1 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 2 --> </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 3 --> </div> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="panel"> <!-- Panel 4 --> </div> 
    </div> 
</div>

Но когда я делаю это так, это выглядит на больших экранах:

Как можно достичь 2 коллектив- на маленьких экранах и 4 коллектив- на больших экранах без необходимости повторять мой код и использовать скрытые - * и visible - * для строк?

Вот bootply этой страницы: http://www.bootply.com/POHPsCRmmM

источник

2015-08-31 Austin Perez

Можете ли вы создать демо-код своего кода? –

@ManojKumar Я добавил bootply для вас :) –

Почему вы не используете min-height? – WebArtisan

Здесь вы идете:

Bootply

Я получил его на работу, разделив левые два div элементов и правых два div элементов в своих соответствующих контейнерах. Тогда я использовал комбинацию col-lg, col-md и col-sm для достижения эффекта вы хотели:

 <div class="letter-space"> 
      <div class="row"> 
       <div class="col-lg-6 col-md-12 col-sm-12"> 
       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading purple"> 
          <h1 class="panel-title fat">Free</h1> 
          <small>$0 <i>for life</i></small> 
         </div> 
         <div class="panel-body grey"> 
          Full access 
          <hr class="hr-line"> 
          New free sounds every month 
          <hr class="hr-line"> 
          <div class="click" tooltips="" tooltip-html="<center><strong>Free support in our forums</strong> <br> support.resonanceinn.com</center>" tooltip-size="small"> 
           <span>Community Support</span> 
          </div> 
          <hr class="hr-line"> 
          <a class="btn btn-primary-white btn-lrg btn-block margin-top" href="/register">Free</a> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h1 class="panel-title fat letter-space">Deluxe</h1> 
          <small>$9.99/<i>month</i></small> 
         </div> 
         <div class="panel-body"> 
          30 sounds a month 
         </div> 
        </div> 
       </div> 
       </div> 


     <div class="col-lg-6 col-md-12 col-sm-12"> 
       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h1 class="panel-title fat letter-space">Suite</h1> 
          <small>$19.99/<i>month</i></small> 
         </div> 
         <div class="panel-body"> 
          300 Sounds a month 
         </div> 
        </div> 
       </div> 


       <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h1 class="panel-title fat letter-space">Penthouse</h1> 
          <small>$199/<i>year</i></small> 
         </div> 
         <div class="panel-body"> 
          Unlimited 
         </div> 
        </div> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div>

источник

2015-08-31 18:35:29

Спасибо! Это именно то, что я пытался сделать. –

Попробуйте что-то вроде этого:

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 1 --> </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 2 --> </div> 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 3 --> </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <div class="panel"> <!-- Panel 4 --> </div> 
     </div> 
    </div> 
</div>

bootply: http://www.bootply.com/G9NGCPoOKe

Надеется, что это работает для Вас!

источник

2015-08-31 18:27:40 AxelWass

Это несколько старый вопрос, и у него уже есть общепринятый ответ; Я хотел немного более жидкий дизайн (и мой вариант использования на самом деле не соответствует вашему), поэтому я придумал другое решение, просто хотел записать его здесь для потомков.

Бутстрап-столбцы основаны на float: left, поэтому вы получаете странный макет, когда обертывание столбцов и левый столбец выше, чем справа. В этом случае браузер пытается поместить его вправо, если позволяет пространство, прежде чем переместить его на следующую строку.

Вы не хотели копировать свои столбцы и использовать видимые/скрытые классы, однако есть и другой вариант использования видимых/скрытых классов, которые используют тот факт, что это плавающие контейнеры. CSS имеет свойство clear, чтобы заставить контейнер перемещаться ниже всех плавающих контейнеров (значение left перемещает его ниже всех левых плавающих, right внизу справа и both ниже всех плавающих, левых или правых).Таким образом, вы можете вставить следующий между вашими колонками паром:

<div class="visible-sm visible-xs" style="clear: both;"></div>

Вы получите тот же эффект, но с меньшей сложностью, хотя, возможно, не самый кошерные самозагрузками пути.

источник

2015-12-18 09:33:16 falstro

Bootstrap - есть строка только на маленьком устройстве

ответ

Смежные вопросы