Bootrap 4.1.1 Изображение баннера и панель навигации не полная ширина - PullRequest
Новая
       1

Bootrap 4.1.1 Изображение баннера и панель навигации не полная ширина

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

Я сделал новую страницу в Bootstrap 4.1.1. Я не могу получить изображение баннера и панель навигации на всю ширину. Страница здесь Можете ли вы понять, что я сделал не так в коде? Я разместил соответствующие части кода для проблемы. Я использовал Bootstrap раньше, но не эту новейшую версию. Заранее спасибо 

body{color:#000;font-size:20px}
.masthead img{width:100%;height:100%;background-image:url(images/Banner.jpg) no-repeat fixed center;
background-size:cover;}

.navbar-custom {
    background-color: #FF8C46;
}


/* change the brand and text color */

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
text-decoration: none; color: #000;
}

a.navbar-brand:link,
a.navbar-brand:visited {
  color: #fff;
  text-decoration: none;
  background-color: #000; 
  border-radius: 50px; padding: .5rem;
}
a.navbar-brand:hover,
a.navbar-brand:focus {
  color: #fff;
  text-decoration: none;
}

/* change the link color */

.navbar-custom .navbar-nav .nav-link {
   text-decoration: none; color: #000;
}

/* change the color of active or hovered links */

.navbar-custom .nav-item.active .nav-link,
.navbar-custom  {
  text-decoration: none;  color: #000;
}

.nav-item .nav-link:hover {
    text-decoration: none;   
}

/* for dropdown only - change the color of dropdown */

.navbar-custom .dropdown-menu {
    background-color: #FF8C46;
}

.navbar-custom .dropdown-item {
    text-decoration: none; color: #000;
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
    text-decoration: none; color: #000;
    background-color:#FF8C46;
}
.navbar-toggler {
   border-color: rgb(0,0,0);
}
.navbar-toggler-icon {
  color: #000;
}
.navbar-toggler-icon:hover {
  background: #036;
}

span.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }
<body>
<div class="container-fluid">
<header class="masthead">
<img src="http://www.pscompetitiveedge.com/images/Banner.jpg" alt="Peter Scott's Competitive Edge logo"/>
</header>
<nav class="navbar navbar-custom navbar-expand-md">
<button class="navbar-toggler drpbtn" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>     
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-home fa-stack-1x fa-inverse"></i>
</span> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="programs.html"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-fire fa-stack-1x fa-inverse"></i>
</span> Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="references.html"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-users fa-stack-1x fa-inverse"></i>
</span> References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="rates.html"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-dollar-sign fa-stack-1x fa-inverse"></i>
</span> Rates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-question fa-stack-1x fa-inverse"></i>
</span> FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
</span> Contact</a>
</li>
</ul> 
<ul class="navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link" href="http://www.linkedin.com/pub/peter-scott/44/3/6b3" target="_blank"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fab fa-linkedin fa-stack-1x fa-inverse"></i>
</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:1-520-977-5695"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-phone-volume fa-stack-1x fa-inverse"></i>
</span> Call Peter</a>
</li>
</ul>       
</div>
</nav>
</div>
<div class="container"> 
<-- the page content goes here -->

Ответы [ 3 ]

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

Итак, я испортил ваш код на инструментах разработчика Chrome и заметил, что <div class="container-fluid"> имеет отступы слева и справа. Однажды я их проверил, баннер прошел всю страницу. Я бы попробовал переопределить его и установить отступ 0px.

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

Вы можете решить эту проблему: 

.container-fluid{
  padding: 0 !important;
}

Я не знаю, хотите ли вы использовать только загрузчик, поэтому, если да, не используйте этот код.

Надеюсь, я тебе помог,

Привет.

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

Проблема с контейнером класса .container-fluid назначает отступы 15px сторонам

Для Bootstrap 4 , Вам необходимо использовать jumbotrons 

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

Docs

Для Bootstrap 3 необходимо использовать .container-full

Extra решение будет переопределять класс Bootstrap с помощью: 

.container-fluid{
  padding: 0;
}

В этом случае я рекомендую объявить второй класс и присвоить эти значения этому классу. Таким образом, вы не испортите .container-fluid для будущего использования.

Надеюсь, это поможет:>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...