<blockquote>

时间:2017-03-02 19:56:30

标签: html twitter-bootstrap django-templates

{%  for post in post_list %}
        <div class="row"> 
               <div class="col-md-4 col-md-offset-4">  
                   <div class="homepost">
                        <blockquote>                                                   
                            <a class="h3" href="{%  url 'posts:detail' post.id %}">{{ post.title }}</a>
                            <footer>By {{ post.user }}</footer>
                        </blockquote>
                        <p>{{ post.content|lower|truncatechars:"15" }}</p>
                        <ul class="list-group">
                            <li class="list-group-item-text">{{ post.likes }} people like this</li>
                            <li class="list-group-item-text">{{ post.comments.count }} Comments </li>
                        </ul>
                    </div>
                </div>
        </div>
{% endfor%}

这是我的代码,事情是我的blockquote大小不同于我的实际文章大小。

像这样,

enter image description here

事情是每个帖子块的左上角都有一个空白区域,这是在我使用blockquote后出现的。就像第一篇文章一样,

测试帖 - 由luvpreet

左边有一个白色矩形,为什么会发生这种情况?

它的解决方案是什么?

1 个答案:

答案 0 :(得分:0)

左边的浅灰色框是引导样式<blockquote>

的方式

请参阅documentation

如果您不喜欢这种风格,您有两种选择:

  1. 使用您自己的CSS覆盖本机引导程序样式。
  2. 请勿使用blockquote代码
  3. 对我来说,你并没有真正使用blockquote标签,因为它是semantically intended

      

    blockquote元素表示引用的部分   另一个来源。

    也许是这样的:

    <div>                                                   
            <h3><a class="h3" href="{%  url 'posts:detail' post.id %}">{{ post.title }}</a></h3>
            <p>By {{ post.user }}</footer></p>
    </div>