Белый бар ниже навигационной панели в начальной загрузке - PullRequest
Новая
       5

Белый бар ниже навигационной панели в начальной загрузке

0 голосов
/ 19 мая 2018

Я использую один из шаблонов начальной загрузки и, хотя я установил margin-bottom:0, у меня все еще есть проблема с панелью навигации и белой панелью.Всякий раз, когда я запускаю этот код, под панелью навигации, а затем с содержимым появляется белая полоса.Есть ли способ убрать белую полосу?Вот HTML-код: 

    @charset "utf-8";
    /* CSS Document */
    * {
    	border-radius: 0 !important;
    }
    .navbar {
    	margin-bottom: 0;
    	border-radius: 0;
    }
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {
    	height: 450px
    }
    /* Set gray background color and 100% height */
    .sidenav {
    	padding-top: 20px;
    	background-color: #f1f1f1;
    	height: 100%;
    }
    /* Set black background color, white text and some padding */
    footer {
    	background-color: #555;
    	color: white;
    	padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
    .sidenav {
    	height: auto;
    	padding: 15px;
    }
    .row.content {
    	height: auto;
    }
    }
 <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>index</title>
    </head>
    
    <body>
    	<nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a class="navbar-brand" href="#">Logo</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          </ul>
        </div>
      </div>
    </nav>
      
    <div class="container-fluid text-center">    
      <div class="row content">
        <div class="col-sm-2 sidenav">
          <p><a href="#">Link</a></p>
          <p><a href="#">Link</a></p>
          <p><a href="#">Link</a></p>
        </div>
        <div class="col-sm-8 text-left"> 
          <h1>Welcome</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <hr>
          <h3>Test</h3>
          <p>Lorem ipsum...</p>
        </div>
        <div class="col-sm-2 sidenav">
          <div class="well">
            <p>ADS</p>
          </div>
          <div class="well">
            <p>ADS</p>
          </div>
        </div>
      </div>
    </div>
    
    <footer class="container-fluid text-center">
      <p>Footer Text</p>
    </footer>
    </body>
    </html>

Ответы [ 2 ]

0 голосов
/ 19 мая 2018

Вы включили bootstrap.css после изменения стиля.Либо поменяйте порядок, либо поставьте! Важный на ваше поле.Лучше всего применять стили в правильном порядке.Последний определенный стиль будет иметь приоритет.

0 голосов
/ 19 мая 2018 
User !important with margin bottom because margin bottom already define in bootstrap css that's why sometime custom css not work.

.navbar{
 margin-bottom: 0 !important;
}
...