0

Напомните пожалуйста, как мне сделать navbar во всю ширину? Не могу найти в google почему-то..

.navbar-collapse {
  background: linear-gradient(to top, #CCCCCC 0%, #FFFFCC 100%);
  border-radius: 5px;

}
.navbar-default .navbar-nav>li>a {
  color: #f3f3f3;
  padding: 4px 68px;
  font-size: 16px;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0,0,0,.6);
  font-weight: bold;
  

}
.navbar-default {
	background-color: #fff;
	border-color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
  color: #ffc000;
  height: 30px;
  background: linear-gradient(to top, #FFFFCC 0%, #FFCC33 100%);
}
.navbar-nav>li {
      border-right: 1px solid gray;
      height: 100%;
      float: left;
      width: 25%;
}
.nav {
	height:30px;
	font-size: 16px;
	
}
.navbar .navbar-nav > li:last-of-type  {
  border-right: none;
}

.navbar-nav {
	width: 100%;
}
<!Doctype HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="style.css">
    <meta name="robots" content=".......">
    <meta name="description" content=".......">
    <meta name="keywords" content=".......">
    <meta name="author" content=".......">
<link rel="icon" type="image/png" href="favicon.png">         

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">    
<meta charset="utf-8">
<title>Главная страница</title>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div id="logo">
        <a href="index.html">
          <img src="images/primerlogo.png" alt="" />
        </a>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div id="contacts">
        <span style="font-size: 16px;" class="glyphicon glyphicon-envelope"></span>E-mail: 
        <p>
          <span style="font-size: 16px"; class="glyphicon glyphicon-phone"></span>Телефон: +7-962-702-3737
        </p>
      </div>
    </div>
  </div>
  <div class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="index.html">Главная</a>
        </li>
        <li>
          <a href="demo.html">Другой </a>
        </li>
        <li>
          <a href="catalog.html">Раздел 3</a>
        </li>
        <li>
          <a href="contact.html">Контакты</a>
        </li>
      </ul>
    </div>
    </div>





 </div>



</body>

1 ответ 1

1

navbar переместить из container в container-fluid:

.navbar-collapse {
  background: linear-gradient(to top, #CCCCCC 0%, #FFFFCC 100%);
  border-radius: 5px;

}
.navbar-default .navbar-nav>li>a {
  color: #f3f3f3;
  padding: 4px 68px;
  font-size: 16px;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0,0,0,.6);
  font-weight: bold;
  

}
.navbar-default {
	background-color: #fff;
	border-color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
  color: #ffc000;
  height: 30px;
  background: linear-gradient(to top, #FFFFCC 0%, #FFCC33 100%);
}
.navbar-nav>li {
      border-right: 1px solid gray;
      height: 100%;
      float: left;
      width: 25%;
}
.nav {
	height:30px;
	font-size: 16px;
	
}
.navbar .navbar-nav > li:last-of-type  {
  border-right: none;
}

.navbar-nav {
	width: 100%;
}
<!Doctype HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="style.css">
    <meta name="robots" content=".......">
    <meta name="description" content=".......">
    <meta name="keywords" content=".......">
    <meta name="author" content=".......">
<link rel="icon" type="image/png" href="favicon.png">         

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">    
<meta charset="utf-8">
<title>Главная страница</title>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div id="logo">
        <a href="index.html">
          <img src="images/primerlogo.png" alt="" />
        </a>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div id="contacts">
        <span style="font-size: 16px;" class="glyphicon glyphicon-envelope"></span>E-mail: 
        <p>
          <span style="font-size: 16px"; class="glyphicon glyphicon-phone"></span>Телефон: +7-962-702-3737
        </p>
      </div>
    </div>
  </div>  
</div>

<div class="container-fluid">
    <div class="navbar navbar-default">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li>
            <a href="index.html">Главная</a>
          </li>
          <li>
            <a href="demo.html">Другой </a>
          </li>
          <li>
            <a href="catalog.html">Раздел 3</a>
          </li>
          <li>
            <a href="contact.html">Контакты</a>
          </li>
        </ul>
      </div>

    </div>
</div>



</body>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.