Что вызывает этот разрыв на стороне экрана? Bootstrap сетка - PullRequest
Новая
       3

Что вызывает этот разрыв на стороне экрана? Bootstrap сетка

2 голосов
/ 26 февраля 2020

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

html,
body,
.container {
  height: 100%;
  width:
}

.container {
  display: table;
  min-width: 100%;
  overflow: hidden;
  min-width: 100%;
  margin-top: -50px;
  padding: 50px 0 0 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

footer {
  background-color: #374754;
  height: 75px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
  z-index: 1;
}

.row {
  height: 100%;
  width: 100%;
}

#library {
  background: blue;
}

#main {
  background: yellow;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-sm-2 no-float" id="library"> library



      </div>

      <div class="col-sm-10 no-float" id="main"> main</div>
    </div>
  </div>

  <footer>footer</footer>

</body>

</html>

Я разорвал его на части и, похоже, не могу понять, что его вызвало. Любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 26 февраля 2020

Удалите настройку ширины 100% для .row - это элемент bootstrap, который имеет свои предопределенные настройки CSS, которые вы не должны изменять (возможно, кроме высоты). Это включает в себя настройки для левого и правого полей и отступов, которые на первый взгляд кажутся странными, но являются частью системы bootstrap.

Кроме того, в вашем первом правиле была неправильная строка для html, body и .container ("ширина: ..."), поэтому правило не применяется вообще. 

html,
body,
.container {
  height: 100%;
}

.container {
  display: table;
  min-width: 100%;
  overflow: hidden;
  min-width: 100%;
  margin-top: -50px;
  padding: 50px 0 0 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

footer {
  background-color: #374754;
  height: 75px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
  z-index: 1;
}

.row {
  height: 100%;
}

#library {
  background: blue;
}

#main {
  background: yellow;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-sm-2 no-float" id="library"> library



      </div>

      <div class="col-sm-10 no-float" id="main"> main</div>
    </div>
  </div>

  <footer>footer</footer>

</body>

</html>
0 голосов
/ 26 февраля 2020

Один из ваших CSS сценариев добавляет margin-left: -15px к вашему row. Обычно это смещает div s влево.

И тот же сценарий добавляет padding-left: 15px; и padding-right: 15px;, поэтому они не охватывают полностью слева направо.

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

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

...