От новичка до гуру: Курсы программирования на CyberDuff

Почему контейнер перекрывает мою боковую панель ‹nav›?

Почему контейнер с жидкостью так перекрывается, а другие - нет?
Это правильно, или я что-то упустил? Мне это кажется неправильным.

<nav class="nav flex-column float-left">
  {links}
</nav>

<div class="container-fluid"><!-- overlapping -->
  <div class="row"><!-- fine -->
    <div class="col"><!-- fine -->
      <main role="main"><!-- fine -->
      {content}
      </main>
    </div>
  </div>
</div>

https://jsfiddle.net/w3LwwxL7/

главный контейнер перекрывает навигацию

Изменить: просто для вас: я хочу получить статическую левую боковую панель / навигацию с фиксированной шириной (см. Изображение). Все, что справа - это основное содержание. Вот почему я не использовал col-1 (nav) и col-11 (main). Надеюсь это поможет :-)


  • какую версию начальной загрузки вы используете? 4 или 3? 17.12.2017
  • le bootstrapo 4 17.12.2017

Ответы:


1

Задайте для боковой панели фиксированный width и установите padding-left (одинаковая ширина боковой панели)

Вот пример: https://jsfiddle.net/w3LwwxL7/3/

17.12.2017
Новые материалы

Отслеживание состояния с течением времени с дифференцированием снимков
Время от времени что-то происходит и революционизирует часть моего рабочего процесса разработки. Что-то более забавное вместо типичного утомительного и утомительного процесса разработки. В..

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

Игра в прятки с данными
Игра в прятки с данными Я хотел бы, чтобы вы сделали мне одолжение и ответили на следующие вопросы. Гуглить можно в любое время, здесь никто не забивается. Сколько регионов в Гане? А как..

«Раскрытие математических рассуждений с помощью Microsoft MathPrompter и моделей больших языков»
TL;DR: MathPrompter от Microsoft показывает, как использовать математические рассуждения с большими языковыми моделями; 4-этапный процесс для улучшения доверия и рассуждений в математических..

Раскройте свой потенциал в области разработки мобильных приложений: Абсолютная бесплатная серия
Глава 6: Работа в сети и выборка данных Глава 1: Введение в React Native Глава 2: Основы React Native Глава 3: Создание пользовательского интерфейса с помощью React Native Глава 4:..

Все о кейсах: Camel, Snake, Kebab & Pascal
В программировании вы сталкивались с ними при именовании переменной, класса или функции. Поддержание согласованности типов и стилей случаев делает ваш код более читабельным и облегчает совместную..

Как работает дистанционное парное программирование и почему оно может изменить вашу жизнь
Серебряная пуля от одиночества и отвлекающих факторов во время обучения программированию Независимо от того, работаете ли вы или учитесь удаленно, велика вероятность, что одиночество и..