Как мне избавиться от пробелов между различными классами / элементами начальной загрузки? - PullRequest
Новая
       6

Как мне избавиться от пробелов между различными классами / элементами начальной загрузки?

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

Я начинающий, когда дело доходит до дизайна сайта.Как мне избавиться от пробела между моим jumbotron navbar и нижним колонтитулом?Между jumbotron и следующим Navbar есть пробел, а также следующий нижний колонтитул.Прилагается следующий jsfiddle> https://jsfiddle.net/5c6kx9tu/1/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="mj.css">
  <title>Michael Jordan Tribute Page</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="jumbotron">
    </div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About MJ</a></li>
  <li><a href="#">Accomplishments</a></li>
  <li><a href="#">Statistics</a></li>
  <li><a href="#">Quotes</a></li>
</ul>
</div>
</nav>
<footer class="footer container-fluid text-center">
  <p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>

</body>

А вот и CSS 

.jumbotron{
  height: 350px;
  width: 100%;
  background-size: 100% 100%;
  background-image:url(mj.jpg);
  margin-bottom: 0px;
}

.footer{
  margin: 0px;
  background-color: grey;
  bottom: 0px;
  padding: 20px;
}

.text-center{
  font-size: 20px;
  font-style: italic;
  font-family: "Gill Sans", sans-serif;
}

Ответы [ 4 ]

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

По моему мнению, лучше не менять собственные классы начальной загрузки, вместо этого создавать собственные или идентификаторы.

Также имейте в виду, куда вы собираетесь добавить css, лучше добавить css после начальной загрузки, иначе вы можете изменить логику начальной загрузки.Это означает, что вы можете генерировать нежелательное поведение.

Вот только пример добавления идентификаторов: https://jsfiddle.net/5c6kx9tu/5/

#myJumbotron{
  margin-bottom:0px;
  background-color: red;//this color it's just to see the problem clear
}

#myNavbar{
  background-color: green;//this color it's just to see the problem clear
  margin-top: 0px;
}

Лучшее решение, на мой взгляд, состоит в том, чтобы добавить еще один файл после начальной загрузки и создать собственные классы для элементов.что вы хотите изменить.

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

Чтобы удалить пробел между jumbotron и navbar, все, что вам нужно сделать, это вызвать вашу таблицу стилей под таблицей стилей начальной загрузки.И затем, в вашей таблице стилей, вам нужны следующие строки, чтобы удалить пробел между navbar и нижним колонтитулом: 

.navbar {
    margin-bottom: 0px;
}
0 голосов
/ 23 мая 2018

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

Если вы используете Bootstrap 3 (которую вы загружаете в своем коде),вам нужно написать несколько вспомогательных классов, как я делал в этой скрипте, и ниже:

вспомогательные классы CSS (вы можете добавить другие - mt (для поля top), 5em (для .5 em)) и т. д .: 

/* helper class, modeled after Bootstrap 4 helper classes */
.mb-0 {
  margin-bottom: 0 !important;
}

Затем просто добавьте эти классы в свою разметку, как показано ниже: 

<body>
    <div class="jumbotron mb-0">
    </div>
    <nav class="navbar navbar-default mb-0">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">About MJ</a></li>
          <li><a href="#">Accomplishments</a></li>
          <li><a href="#">Statistics</a></li>
          <li><a href="#">Quotes</a></li>
        </ul>
      </div>
    </nav>
    <footer class="footer container-fluid text-center">
      <p>"Website created using Bootstrap 4 by Andrew"</p>
    </footer>
  </body>

Рабочий пример / скрипка: https://jsfiddle.net/cale_b/0gn7w3Lk/1/

Если выВы используете Bootstrap 4, эти вспомогательные классы уже существуют, и вы можете использовать их: https://v4 -alpha.getbootstrap.com / utilities / spacing /

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

Если вы добавите 

.navbar {
margin: 0;
}

Это должно прояснить ситуацию.Поиграйте с этим.Убедитесь, что вы добавили это где-то ПОСЛЕ включения таблицы стилей начальной загрузки, чтобы она переопределяла загрузочную CSS.

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

Похожие темы

...