Bootstrap боковое пустое пространство - PullRequest
Новая
       0

Bootstrap боковое пустое пространство

0 голосов
/ 27 марта 2020

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

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container" id="nav">
    <div class="row">
      <div class="col-xl-12">
        <div class="container-fluid" id="nav1">
          <header class="nav-inverse">
            <ul class="nav justify-content-center">
              <div class="row">
                <div class="col-xs-2">
                  <li class="nav-item">
                    <a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
                  </li>
                </div>
              </div>
              <li class="nav-item">
                <a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
              </li>

            </ul>
          </header>
        </div>
      </div>
    </div>
  </div>
  <div class="container" id="body">
    <div class="row">
      <div class="col-xl-2">
        <div class="container fluid" id="body1">
          <h1 id="Header1">Hello</h1>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Я надеюсь, что смогу найти здесь помощь и заранее спасибо!

Ответы [ 3 ]

3 голосов
/ 27 марта 2020

Bootstrap добавляет интервалы по умолчанию к классам container и container-fluid. Чтобы удалить их, вы можете указать, что вы не хотите заполнять отступы / поля для каждого элемента, добавив класс в формате {property}{sides}-{size}, где размер равен 0.

Например, чтобы удалить заполнение, вы можете добавить p-0 учебный класс. Вы также можете удалить указанную c сторону:

  • pt-0 вверху
  • pr-0 справа
  • pb-0 внизу
  • pb-0 left

Аналогично, для удаления поля вы можете добавить класс m-0.

Для получения дополнительной информации о расстоянии, проверьте: https://getbootstrap.com/docs/4.0/utilities/spacing/

1 голос
/ 27 марта 2020

Чтобы удалить эти интервалы по умолчанию, используйте bootstrap классы сетки, которые можно удалить с помощью .no-gutters.

. Вот пример 

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Для получения дополнительной информации: https://getbootstrap.com/docs/4.0/layout/grid/#no -gutters

0 голосов
/ 28 марта 2020

Не уверен, что вы подразумеваете под пробелами, вы можете определить с изображением. Если вы имеете в виду, что ваше тело не заполняет страницу, проблема является вложенной container s. Смотрите комментарии ниже. 

<body>
    <!-- This container is going to "add space" to your sides. -->
    <div class="container" id="nav">
        <div class="row">
            <!-- This will fill all 12 columns on XL viewport,
                 but the columns are inside the parent container. -->
            <div class="col-xl-12">
                <!-- This will go to the limits of the parent container above. -->
                <div class="container-fluid" id="nav1">
                    <header class="nav-inverse">
                    <ul class="nav justify-content-center">
                    <div class="row">
                    <div class="col-xs-2">
                    <li class="nav-item">
                    <a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
                    </li>
                    </div>
                    </div>                 
                    <li class="nav-item">
                    <a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
                    </li>

                    </ul>
                </header>
                </div>
            </div>
        </div>
    </div>
    <div class="container" id="body">
        <div class="row">
            <div class="col-xl-2">
                <div class="container fluid" id="body1">
                    <h1 id="Header1">Hello</h1>
                </div>
            </div>
        </div>
    </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...