bootstrap pull и push column

Я прочитал много тем здесь о stackoverflow относительно этого вопроса. Однако я прочитал и использовал предоставленные здесь решения. по какой-то причине этот материал просто не работает со мной. Я получаю совершенно пустую страницу.bootstrap pull и push column

Идея состоит в том, чтобы получить основную кнопку над кнопкой по умолчанию на дополнительных небольших устройствах. По какой-то причине я совершенно пуст даже на устройствах md и sm.

Поблагодарите за помощь. Спасибо

<body> 
    <div class="row"> 
     <div class="col-md-6 col-xs-12 col-xs-push-12"> 
      <button class="btn btn-default" type="button">Button</button> 
     </div> 
     <div class="col-md-6 col-xs-12 col-xs-pull-12"> 
      <button class="btn btn-primary" type="button">Button</button> 
     </div> 
    </div> 
</body>

источник

2017-01-06 Testing man

Возможная Дубликат [своп позиции сетки, которые бок о бок с верхней и нижней с помощью начальной загрузки] (http://stackoverflow.com/questions/41096317/swap-the -positions-оф-сетках-который-являются-бок о бок-вверх-и-снизу с помощью-сапоги) – Banzay

К сожалению, вы не можете использовать метод push/pull на col - * - 12 из-за действия push/pull. Таким образом, решение, которое работает очень хорошо, чтобы иметь заказ правильно для мобильных устройств, а затем использовать метод Тяни/Толкай на больших размерах экрана, как это:

<div class="row"> 
    <div class="col-xs-12 col-md-6 col-md-push-6"> 
     <button class="btn btn-primary" type="button">Button</button> 
    </div> 
    <div class="col-xs-12 col-md-6 col-md-pull-6"> 
     <button class="btn btn-default" type="button">Button</button> 
    </div> 
</div>

А вот рабочий codepen: http://codepen.io/egerrard/pen/NdqpXZ?

FYI, вы также используете только цифры md и xs, но вы упомянули об этой функции только для размеров экрана xs. Если это так, вам нужно изменить свои колонки md на sm.

источник

2017-01-06 20:22:52

Вам просто нужно подумать «мобильно-первый». Сначала создайте разметку для самого маленького макета устройства, а затем отрегулируйте его, используя push/pull для больших экранов. col-xs-12 не требуется, так как столбцы автоматически стекают на xs ширины.

<div class="row"> 
    <div class="col-md-6 col-md-push-6"> 
     <button class="btn btn-primary" type="button">Button</button> 
    </div> 
    <div class="col-md-6 col-md-pull-6"> 
     <button class="btn btn-default" type="button">Button</button> 
    </div> 
</div>

Демонстрация: http://www.codeply.com/go/aUME1OcT0S

источник

2017-01-06 21:04:17 ZimSystem

ответ

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