Я не знаю, что я делаю неправильно здесь, но я ожидаю, что это будет что-то ужасно глупо.

Я использую Bootstrap 3 в Umbraco 6.0.5, и я не могу заставить переключатель работать с изменением размера - ниже ширины 770 пикселей, навигация рушится, но нет кнопки для переключения, или, скорее, что-то есть, как видно из кода и Firebug, но не отображается в Chrome и Firefox (не пробовал IE).

Обновление - поэтому я попытался изменить целевую информацию (и изменил скрипт) на #main -nav и id на main-nav, без радости. Я попытался поставить символ тире в элемент кнопки > span, и он работает. То есть, дисплей тире, и я могу переключить меню. Но где же строки значков?

Ответы

Ответ 1

И измените <nav class="navbar"> на <nav class="navbar navbar-default">

Ответ 2

Bootstrap - кнопка переключения не отображается в мобильном режиме

FIX: Внесите следующие изменения: bootstrap.min.css

Это фиксирует внешнюю границу кнопки Toggle

.navbar-toggle
{
    position:relative;
    float:right;
    padding:9px 10px;
    margin-top:8px;
    margin-right:15px;
    margin-bottom:8px;
    background-color:transparent;
    background-image:none;
    border-radius:4px
}

Добавить

border:1px solid #444;

(изменить цветовой код в соответствии с вашим дизайном)

.navbar-toggle
{
    position:relative;
    float:right;
    padding:9px 10px;
    margin-top:8px;
    margin-right:15px;
    margin-bottom:8px;
    background-color:transparent;
    background-image:none;
    border:1px solid #444;          /* added line */
    border-radius:4px
}

Это фиксирует горизонтальные линии кнопки Toggle

.icon-bar
{
    display:block;
    width:22px;
    height:2px;
    border-radius:1px;
}

Добавить

border:1px solid #444;

(изменить цветовой код в соответствии с вашим дизайном)

.icon-bar
{
    display:block;
    width:22px;
    height:2px;
    border-radius:1px;
    border:1px solid #444;
}

Ответ 3

Это должно заставить вас указать в правильном направлении. Похоже, что ваш основной икота - ваш атрибут данных о вашей кнопке - это ссылка на класс, а не на идентификатор. Лучше использовать идентификатор в этой ситуации, поэтому, если вы вызываете этот класс в другом месте кода, вы не бросаете шарики кривой в javascript.

Я также вижу, что у вас несколько <li class="dropdown"></li>, которые пусты. Я не уверен, что это намеренно или нет, но я хотел бы ссылаться на структуру, которую я включил.

Надеюсь, это сработает для вас, и вам повезло больше!

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="#">Reech</a> </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="main-nav">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">What is reech? <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="/what-is-reech/about-this-site-aspx">About this site</a></li>
          </ul>
        </li><!-- dropdown -->
        <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="/technologies.apsx">Technologies</a></li>
            <li><a href="/complementary-activities.apsx">Complementary Activities</a></li>
          </ul>
        </li><!-- dropdown -->
        <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="/technologies.apsx">Technologies</a></li>
          </ul>
        </li><!-- dropdown -->
      </ul><!-- nav navbar-nav -->
    </div><!-- collapse navbar-collapse -->
    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container-fluid --> 
</nav>

Ответ 4

В вашей первой строке

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">

он должен быть data-target="#nav-collapse", потому что у вас есть <div class="collapse navbar-collapse" id="nav-collapse">, где id nav-collapse