Я пытаюсь создать навигационную панель с полной шириной, используя бутстрап, но в моем навигаторе есть какой-то предел
Как это:
То, что я действительно пытаюсь сделать, это нечто подобное
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,300,100);
body {
font-family: "Raleway", Sans-Serif;
font-weight: 400;
}
p {
text-align: justify;
font-size: 16px;
}
.navbar {
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav .active a:focus,
.navbar-default .navbar-nav .active a:hover,
.navbar-default .navbar-nav li a:hover {
color: #e1b315;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar-default .navbar-nav li {
margin: 0 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="row">
<div class="col-md-12 text-center">
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
</div>
Решение
.row
или .container
для полной ширины.margin
body
и padding
.отрывок
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,300,100);
body {
font-family: "Raleway", Sans-Serif;
font-weight: 400;
margin: 0; padding: 0;
}
p {
text-align: justify;
font-size: 16px;
}
.navbar {
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav .active a:focus,
.navbar-default .navbar-nav .active a:hover,
.navbar-default .navbar-nav li a:hover{
color:#e1b315;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar-default .navbar-nav li {
margin: 0 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="text-center">
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
Это не единственный путь, но он выполнит эту работу.
body {
font-family: "Raleway", Sans-Serif;
font-weight: 400;
margin: 0;
}
Просто добавьте margin: 0;
к вашему телу CSS
Я сделал навигационную панель зеленой, чтобы ее было легче видеть.
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,300,100);
body {
font-family: "Raleway", Sans-Serif;
font-weight: 400;
margin: 0;
}
p {
text-align: justify;
font-size: 16px;
}
.navbar {
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
background-color: green;
}
.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav .active a:focus,
.navbar-default .navbar-nav .active a:hover,
.navbar-default .navbar-nav li a:hover {
color: #e1b315;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar-default .navbar-nav li {
margin: 0 15px;
}
<div class="row">
<div class="col-md-12 text-center">
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Features</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
I'm not certainly about why that happens
Что происходит?