Bootstrap 3 гиперссылка как кнопка в навигаторе

Question

Я не могу сделать кнопку гиперссылки в navbar, вы можете мне помочь? Я пробовал множество опций, но никто не работал ... Когда я использую кнопку, я не могу использовать href, когда я использую теги и классы btn <a> с помощью navbar-btn, это выглядит не очень хорошо.

Пожалуйста, дайте мне совет.

Answer 1

Приведенный ниже код создает ссылки в виде кнопок:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<a href="http://www.stackoverflow.com/" class="btn btn-info" role="button">Link Button</a>

<a href="#" class="btn btn-info" role="button">Link Button</a> 

Это для начальной загрузки. если вы хотите создать ссылку с помощью кнопки, используйте это.

Answer 2

EDIT: Ваша проблема, кажется, есть более конкретный ответ здесь: Bootstrap 3.0 Button in Navbar

В противном случае, вот мое собственное наблюдение:

Проверить эту скрипку: https://jsfiddle.net/8khzok9s/

Здесь вы можете увидеть что

<button type="button" class="btn btn-default">Default</button> 
<button type="button" class="btn btn-primary">Primary</button> 
<button type="button" class="btn btn-success">Success</button> 
<button type="button" class="btn btn-info">Info</button> 
<button type="button" class="btn btn-warning">Warning</button> 
<button type="button" class="btn btn-danger">Danger</button> 

Похож точно так же, как

<a class="btn btn-default">Default</a> 
<a class="btn btn-primary">Primary</a> 
<a class="btn btn-success">Success</a> 
<a class="btn btn-info">Info</a> 
<a class="btn btn-warning">Warning</a> 
<a class="btn btn-danger">Danger</a> 

Это относится как к стандартным, так и к наклонным стилям, что означает, что курсор мыши находится выше или активно нажимает кнопку.

Проблема в вашем случае заключается в том, что есть некоторые другие css, мешающие стандартной загрузке css. В вашем случае это кажется, что-то вроде этого присутствует:

a{ 
    padding: 15px; 
    color: light-grey; 
} 

обратите внимание, что ваша -кнопка имеет тот же цвет текста в качестве одного из других меню-элементов. Ошибка здесь. Что вам нужно сделать, это отладить ваш другой CSS и убедиться, что стиль (ожидаемый) <a> сделан специально для элементов, которые вы хотите, чтобы он повлиял, и был применен ко всем <a> -элементам.

Если вы используете хром, щелкните правой кнопкой мыши элемент и выберите элемент проверки, чтобы открыть меню, в котором вы можете получить доступ и просмотреть все различные атрибуты css, которые влияют.