Не удается заставить .container правильно работать с Twig / Bootstrap

Я столкнулся с некоторыми проблемами при размещении некоторых ящиков в контейнере под Bootstrap.

Итак, вот мой код:

<div class = "container-fluid">
        <div class = "row">
            {% for post in posts %}
                <div class = "col-md-6">
                    {% include "@CurationBlog/Default/cards/card_default.html.twig" %}
                </div>
            {% endfor %}
        </div>
    </div>

поэтому я несколько раз вызываю свой card_default, который представляет собой только статью с изображением и некоторым телом. Вот его код:

<div class = "ibox">
<div class = "ibox-content col-md-12 row-eq-height box-post">
    <div class = "col-md-4 img-col">
        <img style = "max-height: initial" class = "img-responsive" src='{{ post.illustrationUrl }}'>
    </div>
    <div class = "col-md-8 border-body" style = "background-color: white; padding: 15px;">
        <h3 id = "post-title" style = "margin-top: 0;">
            <a href = "{{ path('curation_blog_redirect_to_post', {'id': post.id}) }}" rel = "noopener noreferrer" target = "_blank" style = "color: black;">
                {{ post.title }}
            </a>
        </h3>
        <div class = "small m-b-xs">
            <strong>{{ post.author }}</strong> &middot; <span class = "text-muted">{{ post.source }}</span>
        </div>
        <p id = "description">{{ post.summary }}</p>
        <p><i class = "fa fa-clock-o" aria-hidden = "true"></i> {{ 'university.body.reading_time'|transchoice(post.readingTimeMinutes) }}</p>
        <div>
            {% for tag in post.tags %}
                <button class = "btn btn-white btn-xs" type = "button" style = "margin-top: 3px;">{{ tag.name }}</button>
            {% endfor %}
        </div>
    </div>
</div>

Так что я не могу найти в этом ничего плохого, но отображаемая страница выглядит так:

Не удается заставить .container правильно работать с Twig / Bootstrap

Да, изображения тоже битые, но это уже другая проблема ...

Если есть идеи, я слушаю!

Обновлено: Забыл уточнить, что мои первые div имеют хорошую ширину и высоту:

Не удается заставить .container правильно работать с Twig / Bootstrap

css twitter-bootstrap-3
15.06.2018 10:39
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
140
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Используйте этот HTML

Вам нужно использовать row, прежде чем снова использовать классы col- * для разделения экрана.

<div class = "ibox">
  <div class = "row">
    <div class = "ibox-content col-md-12 row-eq-height box-post">
      <div class = "row">
        <div class = "col-md-4 img-col">
          <img style = "max-height: initial" class = "img-responsive" src='{{ post.illustrationUrl }}'>
        </div>
        <div class = "col-md-8 border-body" style = "background-color: white; padding: 15px;">
          <h3 id = "post-title" style = "margin-top: 0;">
            <a href = "{{ path('curation_blog_redirect_to_post', {'id': post.id}) }}" rel = "noopener noreferrer" target = "_blank" style = "color: black;">
                  {{ post.title }}
              </a>
          </h3>
          <div class = "small m-b-xs">
            <strong>{{ post.author }}</strong> &middot; <span class = "text-muted">{{ post.source }}</span>
          </div>
          <p id = "description">{{ post.summary }}</p>
          <p><i class = "fa fa-clock-o" aria-hidden = "true"></i> {{ 'university.body.reading_time'|transchoice(post.readingTimeMinutes) }}</p>
          <div>
            {% for tag in post.tags %}
            <button class = "btn btn-white btn-xs" type = "button" style = "margin-top: 3px;">{{ tag.name }}</button> {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

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

<!-- Popper JS -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class = "container-fluid">
  <div class = "row">
    <div class = "col-md-6">
      <div class = "ibox">
        <div class = "row">
          <div class = "ibox-content col-md-12 row-eq-height box-post">
            <div class = "row">
              <div class = "col-md-4 img-col">
                <img style = "max-height: initial" class = "img-responsive" src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAFoAhwMBIgACEQEDEQH/xAAaAAEAAwEBAQAAAAAAAAAAAAAAAQIDBAUH/8QALxAAAgIBAwIDBQkBAAAAAAAAAAECAxEEEkEhURMxYSJUsdHwM1JTcXKBkqLBMv/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD6IAABJBZAAicEpARgnBZInaBTaMGm0bQMsEGm0hoChBZoqwIAAAAAAAA5LopyaRQEpF0iIo0igCiW2l4xz0SOmvR2S6tbV6gcm0jaej4emq882S7cE3JX6bdGKi4PyXYDzHEo0buJnKIGLRnI2kjOaAzAAAAAAAA5NYmXJrEDSJ30aarwVddZ7L4SOGJ6GgasqsofKygOrTypVcp1x2RTxnHUrN02f9XTfpx8DOhY0dqf3vkWojS6W5tZ56+QDw9P+JL6/YvW6K9yVjakuqZzGllE4pYWenX0AmOn09jxGcm8fXB58kehoftn+n5HBPzYGMjGZvIwmBmAAAAAAAByaRM+S6YG0WdGms8K2M+z6/kcsWXiwPauioUXNeUnn4HNpq3bLtFebL0XV26NV2WRjJdOrEYVwWI6zC7Jgb1afZY5N5XBuzj9j33+xHse+v8AkA0kdmqnHsn/AIefJ9T0qvBrtdj1MZNrHVnlSYFZMxmXbM5MCgAAAAAAAHJZFSQLpl4yMiyYGqkWUjFMnIG24ORluG4C7kUbKuRDYEtlJE5KsCAAAAAAAACSABJJUlAWyCpIE5BAAnJGQQAyAQAAAAAAf//Z'>
              </div>
              <div class = "col-md-8 border-body" style = "background-color: white; padding: 15px;">
                <h3 id = "post-title" style = "margin-top: 0;">
                  <a href = "{{ path('curation_blog_redirect_to_post', {'id': post.id}) }}" rel = "noopener noreferrer" target = "_blank" style = "color: black;">
                  {{ post.title }}
              </a>
                </h3>
                <div class = "small m-b-xs">
                  <strong>{{ post.author }}</strong> &middot; <span class = "text-muted">{{ post.source }}</span>
                </div>
                <p id = "description">{{ post.summary }}</p>
                <p><i class = "fa fa-clock-o" aria-hidden = "true"></i> {{ 'university.body.reading_time'|transchoice(post.readingTimeMinutes) }}</p>
                <div>
                  {% for tag in post.tags %}
                  <button class = "btn btn-white btn-xs" type = "button" style = "margin-top: 3px;">{{ tag.name }}</button> {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class = "ibox">
        <div class = "row">
          <div class = "ibox-content col-md-12 row-eq-height box-post">
            <div class = "row">
              <div class = "col-md-4 img-col">
                <img style = "max-height: initial" class = "img-responsive" src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAFoAhwMBIgACEQEDEQH/xAAaAAEAAwEBAQAAAAAAAAAAAAAAAQIDBAUH/8QALxAAAgIBAwIDBQkBAAAAAAAAAAECAxEEEkEhURMxYSJUsdHwM1JTcXKBkqLBMv/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD6IAABJBZAAicEpARgnBZInaBTaMGm0bQMsEGm0hoChBZoqwIAAAAAAAA5LopyaRQEpF0iIo0igCiW2l4xz0SOmvR2S6tbV6gcm0jaej4emq882S7cE3JX6bdGKi4PyXYDzHEo0buJnKIGLRnI2kjOaAzAAAAAAAA5NYmXJrEDSJ30aarwVddZ7L4SOGJ6GgasqsofKygOrTypVcp1x2RTxnHUrN02f9XTfpx8DOhY0dqf3vkWojS6W5tZ56+QDw9P+JL6/YvW6K9yVjakuqZzGllE4pYWenX0AmOn09jxGcm8fXB58kehoftn+n5HBPzYGMjGZvIwmBmAAAAAAAByaRM+S6YG0WdGms8K2M+z6/kcsWXiwPauioUXNeUnn4HNpq3bLtFebL0XV26NV2WRjJdOrEYVwWI6zC7Jgb1afZY5N5XBuzj9j33+xHse+v8AkA0kdmqnHsn/AIefJ9T0qvBrtdj1MZNrHVnlSYFZMxmXbM5MCgAAAAAAAHJZFSQLpl4yMiyYGqkWUjFMnIG24ORluG4C7kUbKuRDYEtlJE5KsCAAAAAAAACSABJJUlAWyCpIE5BAAnJGQQAyAQAAAAAAf//Z'>
              </div>
              <div class = "col-md-8 border-body" style = "background-color: white; padding: 15px;">
                <h3 id = "post-title" style = "margin-top: 0;">
                  <a href = "{{ path('curation_blog_redirect_to_post', {'id': post.id}) }}" rel = "noopener noreferrer" target = "_blank" style = "color: black;">
                  {{ post.title }}
              </a>
                </h3>
                <div class = "small m-b-xs">
                  <strong>{{ post.author }}</strong> &middot; <span class = "text-muted">{{ post.source }}</span>
                </div>
                <p id = "description">{{ post.summary }}</p>
                <p><i class = "fa fa-clock-o" aria-hidden = "true"></i> {{ 'university.body.reading_time'|transchoice(post.readingTimeMinutes) }}</p>
                <div>
                  {% for tag in post.tags %}
                  <button class = "btn btn-white btn-xs" type = "button" style = "margin-top: 3px;">{{ tag.name }}</button> {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class = "ibox">
        <div class = "row">
          <div class = "ibox-content col-md-12 row-eq-height box-post">
            <div class = "row">
              <div class = "col-md-4 img-col">
                <img style = "max-height: initial" class = "img-responsive" src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAFoAhwMBIgACEQEDEQH/xAAaAAEAAwEBAQAAAAAAAAAAAAAAAQIDBAUH/8QALxAAAgIBAwIDBQkBAAAAAAAAAAECAxEEEkEhURMxYSJUsdHwM1JTcXKBkqLBMv/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD6IAABJBZAAicEpARgnBZInaBTaMGm0bQMsEGm0hoChBZoqwIAAAAAAAA5LopyaRQEpF0iIo0igCiW2l4xz0SOmvR2S6tbV6gcm0jaej4emq882S7cE3JX6bdGKi4PyXYDzHEo0buJnKIGLRnI2kjOaAzAAAAAAAA5NYmXJrEDSJ30aarwVddZ7L4SOGJ6GgasqsofKygOrTypVcp1x2RTxnHUrN02f9XTfpx8DOhY0dqf3vkWojS6W5tZ56+QDw9P+JL6/YvW6K9yVjakuqZzGllE4pYWenX0AmOn09jxGcm8fXB58kehoftn+n5HBPzYGMjGZvIwmBmAAAAAAAByaRM+S6YG0WdGms8K2M+z6/kcsWXiwPauioUXNeUnn4HNpq3bLtFebL0XV26NV2WRjJdOrEYVwWI6zC7Jgb1afZY5N5XBuzj9j33+xHse+v8AkA0kdmqnHsn/AIefJ9T0qvBrtdj1MZNrHVnlSYFZMxmXbM5MCgAAAAAAAHJZFSQLpl4yMiyYGqkWUjFMnIG24ORluG4C7kUbKuRDYEtlJE5KsCAAAAAAAACSABJJUlAWyCpIE5BAAnJGQQAyAQAAAAAAf//Z'>
              </div>
              <div class = "col-md-8 border-body" style = "background-color: white; padding: 15px;">
                <h3 id = "post-title" style = "margin-top: 0;">
                  <a href = "{{ path('curation_blog_redirect_to_post', {'id': post.id}) }}" rel = "noopener noreferrer" target = "_blank" style = "color: black;">
                  {{ post.title }}
              </a>
                </h3>
                <div class = "small m-b-xs">
                  <strong>{{ post.author }}</strong> &middot; <span class = "text-muted">{{ post.source }}</span>
                </div>
                <p id = "description">{{ post.summary }}</p>
                <p><i class = "fa fa-clock-o" aria-hidden = "true"></i> {{ 'university.body.reading_time'|transchoice(post.readingTimeMinutes) }}</p>
                <div>
                  {% for tag in post.tags %}
                  <button class = "btn btn-white btn-xs" type = "button" style = "margin-top: 3px;">{{ tag.name }}</button> {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

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

— Basile Mauvieux 15.06.2018 10:57

У меня отлично работает. Добавлен сниппет, через некоторое время добавлю с изображением

— Nandita Sharma 15.06.2018 10:59

Также я добавил 2 строки. 1 после .ibox_content и 1 после .ibox

— Nandita Sharma 15.06.2018 11:02

Какой бутстрап вы используете? Если возможно, попробуйте использовать bootstrap 4.

— Nandita Sharma 15.06.2018 11:06

Или попробуйте добавить этот стиль .row {display: flex; flex-wrap: wrap;}

— Nandita Sharma 15.06.2018 11:09
15.06.2018 10:53
Ответ принят как подходящий

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

<div class = "container-fluid">
    {% for i,post in posts %}
        {% if i%2 == 0 %}<div class = "row">{% endif %}
        <div class = "col-md-6">
           {% include "@CurationBlog/Default/cards/card_default.html.twig" %}
        </div>
        {% if i%2 == 0 %}</div>{% endif %}
    {% endfor %}
</div>

У меня не может быть такой же высоты, ограничение на работе: /

— Basile Mauvieux 15.06.2018 10:59
15.06.2018 10:53

Другие вопросы по теме

Остановить автоматическое закрытие предупреждений Bootstrap
2 ввода текста заполняют всю ширину, не работают
Множественный коллапс начальной загрузки 3.3.4
Почему класс смещения Bootstrap не работает?
Расширение боковой панели Bootstrap до конца веб-страницы
Переменная Twig внутри атрибута данных
Как сделать так, чтобы раскрывающийся список начальной загрузки всегда выровнялся по левому краю строки
Изображения иногда по умолчанию имеют ширину 0
Прокрутка фона не работает
Что на самом деле делает .val (). Trigger ('change')?

Похожие вопросы

Перенос по словам не учитывает родительскую ширину для длинного неразрывного текста
Используйте js if / else со значением CSS
Удалить отступы в img src
Как сделать изображение заголовка в центре при использовании css?
CSS Body min-height бесконечная прокрутка
Как остановить перемещение текста при переходе?
Ошибка загрузки bundle.js в приложении response. Приложение не работает должным образом
Вставка текста на баннере css анимация
Фоновое изображение не установлено на полную высоту
Html2canvas в IE и Firefox не читает заголовок данных