Кнопка Bootstrap 3.0 на панели навигации

79

Я обновил bootstrap 3.0. И тег "a", который выглядит как btn (с помощью класса .btn), испорчен на панели навигации.

<li>
   <a href="<?php echo BASE_PATH; ?>register.php" class="btn btn-primary btn-sm">
       <?php echo "<strong>" . _('Bayilik Başvurusu') . "</strong>"; ?>
   </a>
</li>

Но он работает некорректно. Я думаю, что Bootstrap изменил систему.

Джихан Кюсмез
источник
Вам действительно стоит взглянуть на раздел документации по миграции с Bootstrap 2 на 3. В нем перечислены все классы, которые были изменены или удалены, и что использовать вместо них. getbootstrap.com/getting-started/#migration
cjd82187

Ответы:

176

Оберните <p class="navbar-btn">вокруг <a class="btn">:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <p class="navbar-btn">
                    <a href="#" class="btn btn-default">I'm a link button!</a>
                </p>
            </li>
        </ul>
    </div>
</nav>

JSFiddle: http://jsfiddle.net/lachlan/398kj/

Скриншот:
Кнопка ссылки начальной загрузки на панели навигации

Лахлан Артур
источник
1
Спасибо, работает хорошо, и мне больше нравится ваше решение, так как вы все еще можете использовать <a>
pastullo
6
Будьте осторожны: свернутая версия выглядит не очень хорошо. Остальные ссылки являются блоками (т.е. кликабельны во всю ширину). Если вы используете btn-blockего, выравнивает текст по центру, поэтому он не соответствует другим ссылкам.
rybo111
46

Теперь у bootstrap 3 на панели навигации есть такие кнопки:

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Он использует, navbar-btnпоэтому знает, что он находится на панели навигации.

Если вы хотите, чтобы он работал, сделайте следующее:

<li>
    <form action="#">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>

Таким образом, он по-прежнему действует как тег привязки. Просто измените #значение, которое вам действительно нужно.

Итак, для этого случая:

<li>
    <form action="<?php echo BASE_PATH; ?>register.php">
        <button class="btn btn-default navbar-btn">Link</button>
    </form>
</li>
Альбзи
источник
1
что о ? <a type="button" class="btn btn-default navbar-btn"> Ссылка </a> Прежде чем мы сможем это сделать.
Cihan Küsmez
2
К сожалению, в этом случае, если путь, на который он указывает, является /appURL-адресом результата /app?(обратите внимание на дополнительный вопросительный знак).
hakunin
24

При загрузке 3 по-прежнему возможно <a>отображение ссылки в виде кнопки, но вы должны включить их в файл <form>. Кроме того, <a>должен быть включен navbar-btnкласс.

<li>
  <form>
    <a href="#" class="btn btn-primary btn-sm navbar-btn">
      register
    </a>
  </form>
</li>
мегар
источник
15
Спасибо за подсказку. Собственно нашел и <div>работы, а <form>не смысловые. Главное - не делать aпрямых потомков <li>.
Билли Чан
1
Однако, когда вы это делаете, зависает ли что-то неправильно? Фон для кнопки стал для меня прозрачным.
RichC
1
Решение <div> работает для меня. Жаль, что это поддерживается изначально во фреймворке, я также видел много обсуждений на Github вокруг этого и не думаю, что у них есть какие-либо планы, чтобы кнопки ссылок работали изначально, что мне кажется плохим выбором.
SirRawlins
21

Проблема в том, что селектор для стилизации якоря в навигационной панели: .nav > li > aэто означает, что он имеет более высокий приоритет, чем .navbar-btn.

Вы можете исправить это, просто обернув его другим тегом, например span. Я не думаю, что вам следует использовать тег формы, как предлагают другие, поскольку это вообще не форма.

Intellix
источник
2
определенно лучший ответ.
typeoneerror
0

http://learnangular2.com/events/

СОБЫТИЕ ОБЪЕКТ

Чтобы захватить объект события, передайте $ event в качестве параметра в обратном вызове события из шаблона:

<button (click)="clicked($event)"></button>

Это простой способ изменить событие, например вызвать preventDefault:

@Component(...)
class MyComponent {
  clicked(event) {
    event.preventDefault();
  }
}
Викторхазбун
источник
Это ... ммм. Какая?
Adowrath