Порядок столбцов Bootstrap 4 с помощью шаблона WHMCS

Итак, я перестраиваю тему своего веб-сайта, которая работает на WHMCS. Я делаю это с помощью bootstrap 4. Используя BS4, я пытаюсь понять, как сделать порядок столбцов в клиентской области (точно так же, как это делает шаблон «шесть» по умолчанию (который использует BS3)), но не так много удача. Это должно выглядеть примерно так: в представлении на рабочем столе основная и дополнительная навигация должны располагаться слева, а основное содержимое справа, а на мобильном устройстве основная навигация сжимается и располагается над содержимым, а вторичная навигация после содержание:

Вид рабочего стола:

PN | MC
SN |

Мобильный вид:

PN
MC
SN

Вот основной макет html:

<div class="container">
    <main class="row">
        <aside class="col-sm-3">
            BS4 Card containing Primary Navigation
        </aside>
        <article class="col-sm-9">
            Main client area content
        </article>
        <aside class="col-sm-3">
            BS4 Card containing Secondary Nav
        </aside>
    </main>
</div>

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

Редактировать:
Вот несколько скриптов, чтобы вы могли видеть, что происходит:

Примечание. Изображения удалены, потому что скрипки показывают то же самое.


html css bootstrap-4 whmcs
person Johnno13    schedule 30.06.2018    source источник
comment
Привет. Можете ли вы опубликовать свой код здесь через скрипку или как-то иначе? У меня может быть решение, но мне нужно проверить, работает ли оно с вашим конкретным вариантом использования.   -  person Rohan Mayya    schedule 30.06.2018

Ответы (3)


arrow_upward
0
arrow_downward

Вы неправильно использовали загрузочную сетку. Сумма всех столбцов должна быть 12. Я разместил рабочий код, который вам нужен:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <main class="row">
        <div class="col-lg-3 col-ms-3 col-sm-3 col-xs-3">
        <div class="row">
        <aside class="col">
            BS4 Card containing Primary Navigation
        </aside>
        </div>
        <div class="row">
        <aside class="col">
            BS4 Card containing Secondary Nav
        </aside>
        </div>
        </div>
        <div class="col-lg-9 col-ms-9 col-sm-9 col-xs-9">
        <article class="col">
            Main client area content
        </article>
        </d

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

person Arex    schedule 30.06.2018
comment
На экранах телефонов это переместит основное содержимое клиентской области вниз, а вторая панель навигации будет зажата между двумя столбцами. Рассмотрите возможность использования правила «order» css здесь, чтобы изменить порядок на небольших экранах. - person Rohan Mayya; 30.06.2018
comment
@RohanMayya Спасибо за комментарий. Но посмотрите на редактирование, которое я сделал. Это решит проблему под рукой. Johnno13 должен решить, какое расстояние должно быть от дна в медиа-запросе. - person Arex; 30.06.2018
comment
@RohanMayya вам нужны гибкие элементы для работы правила CSS «порядок». Проблема должна быть решена с использованием текущего кода начальной загрузки. - person Arex; 30.06.2018
comment
@RohanMayya Использование порядка не было бы ответом, потому что на мобильных экранах порядок уже правильный. - person Johnno13; 30.06.2018
comment
@Arex Ваш пример вообще не сработал. Он не сворачивается так, как я хочу, на небольших экранах. Обратите также внимание, что я использую последнюю версию BS4. - person Johnno13; 30.06.2018
comment
Я обновил исходный пост, включив в него скрипты версии BS4, которые я пытаюсь заставить работать, и способ BS3, который работал отлично. - person Johnno13; 30.06.2018

arrow_upward
0
arrow_downward

Вот быстрое решение: добавьте класс «adjust» (или любое другое имя) в третий столбец.

<div class="container">
        <div class="row">
            <div class="col-sm-3">
                nav
            </div>
            <div class="col-sm-9">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque temporibus dolorum ea natus nam labore delectus vel, voluptatibus libero eligendi fuga optio! Nisi nemo architecto est, tenetur hic nesciunt distinctio totam repellat necessitatibus. Explicabo nam illum incidunt iusto recusandae nobis eos inventore dolore, suscipit cum earum numquam alias eveniet voluptatem!
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 adjust">
                nav2
            </div>
     </div>
</div>

CSS:

 .adjust{
   position:relative;
   bottom: 100px; /* whatever adjustment you wish */

 }

 @media(max-width:768px){
 .adjust{
  position:relative;
  top: 100px; /* whatever adjustment required to push it back down */
  }

 }
person Rohan Mayya    schedule 30.06.2018
comment
Я думаю, что вижу, что вы пытаетесь сделать здесь, но я не думаю, что это сработает, потому что для настройки необходимо знать размеры столбцов, но каждый раздел навигации и сам контент будут изменять размер в зависимости от страницы. просмотрено. - person Johnno13; 30.06.2018

arrow_upward
0
arrow_downward

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

Сначала преобразуйте элементы, содержащие .row, а также внутренние .col-sm-* в элементы блочного уровня, используя утилиты отображения BS4, добавив .d-lg-block ко всем 4 элементам.
Затем используйте утилиты с плавающей запятой для соответствующего извлечения каждого столбца. В этом случае добавьте .float-lg-left в первый и третий столбцы (столбцы навигации) и .float-lg-right в средний столбец (основной контент).

Вот пример того, как это работает в BS4: https://www.bootply.com/0TrQZNXF1S

person Johnno13    schedule 01.07.2018