Почему навигационная панель не занимает всю ширину?

Question

Почему навигационная панель не занимает всю ширину?

-2

Я пытаюсь создать навигационную панель с полной шириной, используя бутстрап, но в моем навигаторе есть какой-то предел

Как это:

То, что я действительно пытаюсь сделать, это нечто подобное

@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="/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>

Gabriel Tavares 01 фев. 2016, в 15:38

Источник

0

downvote для названия.
Vishwanath 01 фев. 2016, в 14:01
0

I'm not certainly about why that happens Что происходит?
Praveen Kumar Purushothaman 01 фев. 2016, в 14:01
0

И это не полный код, я верю.
Praveen Kumar Purushothaman 01 фев. 2016, в 14:03
0

Так что я извиняюсь за что-то, правда, я новичок здесь и привык к правилам здесь = p
Gabriel Tavares 01 фев. 2016, в 16:06

Показать ещё 2 комментария

Теги:

twitter-bootstrap

html

css

2 ответа

0

Это не единственный путь, но он выполнит эту работу.

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>

Sauced Apples 01 фев. 2016, в 14:10

Ещё вопросы

I'm not certainly about why that happens Что происходит?
Так что я извиняюсь за что-то, правда, я новичок здесь и привык к правилам здесь = p

Praveen Kumar Purushothaman · Accepted Answer · 2016-02-01T14-42-00.000Z

Решение

Не обернуть содержимое с .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="/bootstrap.min.css" />
<script src="/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>

Выход: http://output.jsbin.com/gicekasiri