Кнопка Bootstrap 3.0 в Navbar

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

<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 изменил систему, я думаю.

Ответы

Ответ 1

Оберните a <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 link button in navbar

Ответ 2

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

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

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

Ответ 4

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

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

Ответ 5

http://learnangular2.com/events/

ОБЪЕКТ ОБЪЕКТА

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

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

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

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