#html #css
#HTML #css
Вопрос:
У меня проблема с установкой всех элементов header
в одной строке. Вот код:
<nav class="navbar navbar-default header navbar-fixed-top">
<div class="col-md-12 nav-wrapper">
<div class="row">
<div class="navbar-header">
<div class="col-md-3">
<div class="opener-left-menu is-open">
<span class="top"></span> <span class="middle"></span> <span class="bottom"></span>
</div>
<a href="#" class="navbar-brand"> <b>Consultation Web</b></a>
</div>
<div class="col-md-3">
<ul class="nav navbar-nav navbar-right user-nav">
<li class="user-name"><span>User name</span></li>
<li class="dropdown avatar-dropdown">
<img src="./app/shared/img/avatar.jpg"
class="img-circle avatar" alt="user name" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true" />
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
Я попытался окружить элементы в row
классе.
также я дал class="col-md-3"
для обоих элементов. Итак, я ожидаю, что использую только половину доступных столбцов. К сожалению, img
тег всегда переходит к следующей строке.Я хочу, чтобы все элементы были только в одной строке.
Как я могу это исправить?
Вот css, который я использую:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<link rel="stylesheet" href="./app/shared/css/style.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
Я уверен, что style.css
это загружается правильно.
Комментарии:
1. Вы пытались увеличить размер панели навигации — правильно? Вероятно, в 3/12 столбцах недостаточно места.
2. Вы добавили
bootstrap.min.css
,jquery.min.js
иbootstrap.min.js
в свой<head>
тег?3. вставьте
nav
row
тоже.
Ответ №1:
Спасибо вам всем. Я забыл добавить
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">