Фоновое изображение в Bootstrap

Я пробовал следующий код, и по какой-то причине мое фоновое изображение не занимает всю страницу, и оно охватывает только панель навигации. Что я должен изменить в следующем коде? Также как я могу сделать панель навигации шириной всей ширины веб-страницы?Фоновое изображение в Bootstrap

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Example of Bootstrap 3 Static Navbar</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<style type="text/css"> 
    .bs-example{ 
     margin: 20px; 
    } 
</style> 
</head> 
<body> 
<div class="container" style="background-image:url('tp.jpg');"> 
<div class="bs-example"> 
    <nav id="myNavbar" class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">TNP</a> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Home</a></li> 
      <li class="dropdown"> 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle">Companies<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li class="dropdown"> 
       <li><a href="#">Rakuten</a></li> 
       <li><a href="#">Morgan Stanley</a></li> 
       <li><a href="#">TCS</a></li> 
       <li><a href="#">Nvidia</a></li> 
      </ul> 
      </li> 
        <li class="dropdown"> 
         <a href="#" data-toggle="dropdown" class="dropdown-toggle">Student <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Login</a></li> 
          <li><a href="#">Drafts</a></li> 
          <li><a href="#">Sent Items</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Trash</a></li> 
         </ul> 
        </li> 
      </div> 
     </div> 
    </nav> 
</div> 
</div> 
</body> 
</html>

источник

2015-07-05 Amit Naik

Ваш '.container' получает высоту' nav'. Вы должны добавить 'height: 100%' в '.container', чтобы оставить остальную часть страницы. –

И добавьте 'background-size: cover;' в '.container', чтобы получить изображение. –

Используйте класс container-fluid вместо container, чтобы сделать его использовать всю ширину.

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

Вот FIDDLE.

источник

2015-07-05 16:52:32

Как добавить высоту в текущий код? Могу ли я просто добавить атрибут height в строку, где я указал фоновый URL? –

Да, вы можете добавить его туда. Вы также можете добавить изображение внутри тела, если вы не хотите указывать высоту контейнера. Есть много способов. Просто поиграйте с несколькими из них, вы попадете в завывания и минусы каждого. –

Фоновое изображение в Bootstrap

ответ

Смежные вопросы