Упорядочивание столбцов Bootstrap 4 с шаблоном WHMCS - PullRequest
Новая
       8

Упорядочивание столбцов Bootstrap 4 с шаблоном WHMCS

0 голосов
/ 30 июня 2018

Итак, я перестраиваю тему моего сайта на платформе WHMCS. Я делаю это с помощью начальной загрузки 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 это было сделано просто с помощью левого смещения, но поскольку BS4 использует flex-box, это больше не работает.

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

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

Ответы [ 3 ]

0 голосов
/ 30 июня 2018

Вы неправильно использовали сетку начальной загрузки. Сумма всех колов должна быть 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.

0 голосов
/ 01 июля 2018

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

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

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

0 голосов
/ 30 июня 2018

Вот быстрое решение: Добавьте класс '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 */
  }

 }
...