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

Я обновил 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 изменил систему.

Оберните <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/

Скриншот:

Теперь у 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>

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

<li>
  <form>
    <a href="#" class="btn btn-primary btn-sm navbar-btn">
      register
    </a>
  </form>
</li>

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

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

http://learnangular2.com/events/

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

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

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

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

@Component(...)
class MyComponent {
  clicked(event) {
    event.preventDefault();
  }
}