2017-01-02 1 views
0

У меня есть образец страницы с тремя div с, как показано ниже:Как плавать элементы div при использовании col - * - pull или col - * - push?

<body class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div> 
 
    <div class="col-lg-4 col-md-6 col-md-pull-6 col-lg-pull-0"></div> 
 
    <div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div> 
 
    </div> 
 
</body>

Когда размер окна браузера достигают до md точки и второй div выше, чем первый идет к правой стороне первый. как я должен изменить реализацию сетки, чтобы исправить это? У меня есть код на codepen.io

ответ

1

Sytax ошибки:

Нет необходимости col-lg-4.col-md-6 не заменить его на col-lg-4 col-md-6

<body class="container"> 
    <div class="row"> 
    <div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div> 
    <div class="col-lg-4 col-md-6 col-md-pull-6 col-lg-pull-0"></div> 
    <div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div> 
    </div> 
</body> 

А также, если заменить последний столбец-й мкр-нажимной 6 и коллектив- lg-push-0 до col-md-offset-6 и col-lg-offset-0. Он должен вести себя так, как вам хотелось.

Здесь раздвоенный codepen

Это произошло потому, что смещение работы в иначе, чем толчок в загрузчике. Here is reason

+0

Спасибо за внимание –

+0

@SaeidAlidadi Я обновил свой ответ, пожалуйста, проверьте. – squiroid

+0

Вы не изменились, я вижу :) –

0
<body class="container"> 
    <div class="row"> 
    <div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div> 
    <div class="col-lg-4 col-md-6 col-md-pull-6 col-lg-pull-0"></div> 
    <div class="col-lg-4 col-md-6 col-md-pull-6 col-lg-push-0"></div> 
    </div> 
</body> 
Смежные вопросы