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

Question

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

2

Я использую twitter bootstrap для node.js UI, следующий 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

Bill goldberg 06 дек. 2014, в 16:37

Источник

1

Я думаю, что это может быть опечатка, вы используете имя класса navbar-defult вместо navbar-default .
ckuijjer 06 дек. 2014, в 15:31
0

@ckuijjer-thanks ckuijjer-спасибо, я изменил это и все еще отмечаю, что было изменено в пользовательском интерфейсе, пожалуйста, смотрите скриншот, который я добавил к посту
Bill goldberg 06 дек. 2014, в 15:42
0

Я предлагаю отредактировать вопрос и составить список того, что неправильно, и что вы ожидаете от них. Чтобы сделать панель навигации черной, добавьте класс navbar-inverse btw
ckuijjer 06 дек. 2014, в 15:45
0

@ckuijjer-i've ckuijjer-я изменил это, и теперь у меня есть противоположные цвета, см. сообщение с новой картинкой, что я тут делаю не так?
Bill goldberg 06 дек. 2014, в 15:52
1

Весь ваш контент является дочерним по отношению к <nav> . У вас должен быть только контент навигационной панели.
ckuijjer 06 дек. 2014, в 15:54
0

@ckuijjer-since ckuijjer-так как я новичок в этом, не могли бы вы привести пример?
Bill goldberg 06 дек. 2014, в 15:57

Показать ещё 4 комментария

Теги:

javascript

twitter-bootstrap

node.js

css

twitter-bootstrap-3

1 ответ

Ещё вопросы

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

ckuijjer · Accepted Answer · 2014-12-06T16-59-00.000Z

Это может быть началом. Я переместил jumbotron за пределы <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>

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