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

Bootstrap не работает должным образом

Я использую twitter bootstrap для пользовательского интерфейса node.js. Следующий HTML-код — это то, что я получил после использования Jade. Я хочу использовать jumbotroon http://getbootstrap.com/examples/jumbotron/ и поместить вкладки 1 и 2 в ту же строку имени проекта на панели навигации и использовать черный цвет, как в ссылке Я пробовал много вещей, что я делаю неправильно здесь?

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"></button>
    </div>
    <a class="navbar-brand" href="/#">
                        Node Rec
    </a>
    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="/recipes/b1">

                                    Tab1

                                </a>
        </li>
        <li>
          <a href="/recipes/b1"></a>
        </li>
      </ul>
      <div class="container"></div>
      <div class="jumbotron"></div>
      <h1>

                            List Arrivals

                        </h1>
      <ul>
        <li>

          33: LAX-Tue Dec 02 2014 16:04:41

        </li>
        <li>

          13: MKE-Tue Dec 02 2014 16:05:48
        </li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</nav>

Вот так это выглядит сейчас...

введите здесь описание изображения

когда я меняю его на navbar-inverse, я получаю противоположное, а не то, как выглядит jumbotron введите описание изображения здесь


  • Я думаю, это может быть опечатка, вы используете имя класса navbar-defult вместо navbar-default. 06.12.2014
  • @ckuijjer-спасибо, я изменил его и все еще отмечаю, что он был изменен в пользовательском интерфейсе, пожалуйста, посмотрите снимок экрана, который я добавил к сообщению. 06.12.2014
  • Я предлагаю отредактировать вопрос и составить список неправильных вещей и того, что вы ожидаете от них. Чтобы сделать панель навигации черной, добавьте класс navbar-inverse кстати 06.12.2014
  • @ckuijjer-я изменил его, и теперь у меня есть противоположные цвета, смотрите пост с новой картинкой, что я здесь делаю неправильно? 06.12.2014
  • Весь ваш контент является дочерним элементом <nav>. У вас должно быть только содержимое навигационной панели. 06.12.2014
  • @ckuijjer-так как я новичок в этом, не могли бы вы привести пример? 06.12.2014

Ответы:


1

Это может быть началом. Я переместил джамботрон за пределы <nav>.

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"></button>
    </div>
    <a class="navbar-brand" href="/#">
                        Node Rec
    </a>
    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="/recipes/b1">Tab1</a>
        </li>
        <li>
          <a href="/recipes/b1">Tab2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="jumbotron">
    <h1>

                            List Arrivals

                        </h1>
    <ul>
      <li>

        33: LAX-Tue Dec 02 2014 16:04:41

      </li>
      <li>

        13: MKE-Tue Dec 02 2014 16:05:48
      </li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
</div>

06.12.2014
  • Большое спасибо! Кстати, вы знаете Джейд? Я думаю, что проблема в отступах, но не могу найти, что я делаю неправильно? 06.12.2014
  • Пожалуйста! Я не знаю нефрита, но в этих случаях лучше всего смотреть на вывод напрямую. Звучит действительно как проблема в ваших шаблонах 06.12.2014
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

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

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

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

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..