无法使.container与Twig / Bootstrap一起正常工作

时间：2018-06-15 08:39:52

标签： css twitter-bootstrap-3

我遇到了一些关于在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>

所以我找不到任何错误，但渲染的页面看起来像这样：

rendering of my page

是的图像也被破坏了，但这是另一个问题......

如果你有任何想法，我正在听！

编辑：忘了我的第一个div有很好的宽度和高度：

enter image description here]

2 个答案:

答案 0 :(得分：2)

我无法在网上看到这一点，但我想这与你的ibox有不同的高度有关。如果您无法将相同的高度应用于所有这些高度，请尝试以下操作：

<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>

答案 1 :(得分：0)

使用此html

您需要在再次使用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>

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题