Кнопка Bootstrap 3.0 у Navbar


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/

Знімок екрана:
Кнопка посилання Bootstrap на панелі навігації


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?(зверніть увагу на додатковий знак запитання).
хакунін

24

За допомогою bootstrap 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.

Виправити це можна, просто загорнувши його в інший тег, як проміжок часу. Я не думаю, що вам слід використовувати тег форми, як пропонують інші, оскільки це зовсім не форма.


2
безумовно, найкраща відповідь.
typeoneerror

0

http://learnangular2.com/events/

ОБ'ЄКТ ПОДІЇ

Щоб захопити об’єкт події, передайте $ event як параметр у зворотний виклик події з шаблону:

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

Це простий спосіб змінити подію, наприклад виклик prevenDefault:

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

Це ... Що?
Адорат
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.