Я использую класс карты из Bootstrap 4 , но есть лишнее правое пространство, от которого не могу избавиться:

enter image description here

( Не обращайте внимания на « порно » вещь , хех ) .

Как видите, есть лишнее нужное место.

Я пытаюсь избавиться от этого с помощью этого кода:

 .card{
     width: 80% !important;
     background-color: black;


 }


 .card-block{
    color: white !important;

 }

 #card-div{
     padding-bottom: 10px;
     padding-right: -10px !important;

 }

 #card-div > a{
     text-decoration: none;
 }

HTML-код (тоже с использованием Jekyll):

<div class="col-sm-8" id="main-content">

  <div class="row">

    {% for post in site.posts%}
    <div class="col-sm-4" id="card-div">
      <a target="_blank" href=" {{post.url}} ">
        <div class="card">
          <img class="card-img-top" src="../media/logo-prueba.jpg">
          <div class="card-block">
            <h5 class="card-title text-center">{{ post.title }}</h5>
            <p class="card-text">{{ post.category }}</p>
          </div>
        </div>
      </a>
    </div>
    {% endfor %}

  </div>

</div>

Не работает.

Любая помощь?

2
dawn 8 Янв 2018 в 08:44

2 ответа

Лучший ответ

Ширина элемента столбца определяется типом столбца в CSS. У этого есть ширина 33,33%. Количество пикселей зависит от точки останова. В настоящее время ваш столбец содержит карточку div. Этот div карты составляет 80% от div столбца. Поскольку по умолчанию используется левая сторона, оставшиеся 20% отображаются справа. Добавление margin: 0 auto; к карточке CSS центрирует div в его родительском элементе. Другое решение - использовать ширину 100% (добавить width: 100% и удалить width: 80%!important) в блоке карты, чтобы заполнить весь столбец.

3
JoostS 8 Янв 2018 в 07:47

Добавление класса начальной загрузки "без желобов" помогает устранить следующее:

div class="row no-gutters"
0
stealthyninja 8 Апр 2020 в 21:48