Nano Hash - криптовалюты, майнинг, программирование

Как изменить ширину навигационной панели bootstrap

Я пытаюсь создать веб-страницу с начальной загрузкой, используя шаблон для панели инструментов в Интернете (Creative Tim), где у меня есть статическая панель навигации и боковая панель. Боковая панель простирается по всей длине страницы. Однако я хотел бы иметь фиксированную панель навигации, но всякий раз, когда я пытаюсь это сделать, между панелью навигации и боковой панелью возникают помехи.

Первое изображение со статической панелью навигации выглядит так: введите здесь описание изображения

Мой HTML-код для этого бита:

<div class="wrapper">
<div class="sidebar" data-color="red" data-image="assets/img/sample.jpg">

    <div class="sidebar-wrapper">
        <div class="logo">
            <a href="" class="simple-text">
                Engineering
            </a>
        </div>
        <ul class="nav">
            <li class="active">
                <a href="dashboard.html">
                    <i class="pe-7s-graph"></i>
                    <p>Dashboard</p>
                </a>
            </li>


        </ul>
    </div>
</div>

<div class="main-panel">
    <nav class="navbar navbar-default navbar-fixed">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <p class="navbar-brand">Muhammad Tareen</p>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-left">

                </ul>

                <ul class="nav navbar-nav navbar-right">

                    <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                tareenmj
                                <b class="caret"></b>
                          </a>
                      </li>
                    </ul>
                  </div>
            </div>
        </nav>
    </div>

The second option I tried was making it fixed by changing the class of the navbar, but that messed up the formatting, it looks like: enter image description here As you can see the navbar is completely interfering with everything else.

Любые решения будут оценены, спасибо!

html css twitter-bootstrap-3
19.04.2017

  • Является ли вкладка Engineering элементом nav? Или это элемент боковой панели? Нужно больше HTML-кода. 19.04.2017
  • Включите больше вашего HTML, как отделить это левое поле от навигации? навигация внутри столбца? 19.04.2017
  • Извините, я добавил достаточно html, который я чувствую сейчас. 19.04.2017
  • Вы можете использовать js/jquery для определения положения прокрутки и фиксирования div при прокрутке вниз. И когда прокрутка находится вверху, сделайте ее положение статичным. 20.04.2017

Ответы:


1

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

Например, вам нужно получить ширину боковой панели и настроить что-то вроде:

.navbar-fixed {
  left: 200px; /* just an estimate of your sidebar's width */
  width: calc(100% - 200px);
}

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

 .main-panel {
   padding-top: 40px;
 }

Вам также потребуется обновить эти стили для любого адаптивного поведения вашего сайта, но это должно, по крайней мере, направить вас в правильном направлении.

Вот небольшая демонстрация, которую я сделал для иллюстрации: ручка/zwrMbW?editors=1100#

Удачи

20.04.2017

2

Если вы добавили сетки начальной загрузки на боковую панель и хотели бы добавить то же самое для панели навигации, удалите класс container из панели навигации и примените класс сетки к тегу навигации. Поскольку панель навигации имеет фиксированное положение, она будет начинаться с верхнего левого угла экрана. поэтому вы можете добавить другие классы, такие как pull-right или col-md-offset-2.

Таким образом, у вас есть решение только для начальной загрузки без необходимости создавать отдельные классы.

<div class="main-panel">
    <nav class="navbar navbar-default navbar-fixed col-md-10">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <p class="navbar-brand">Muhammad Tareen</p>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-left">

                </ul>

                <ul class="nav navbar-nav navbar-right">

                    <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                tareenmj
                                <b class="caret"></b>
                          </a>
                      </li>
                    </ul>
            </div>
        </nav>
    </div>
20.04.2017

3

Используйте !важно; чтобы переопределить этот класс. Бывший. <div style="width:100px !important;">

Это сработает .. спасибо

20.04.2017
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..