Question

我有以下内容：

{% block content %}
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading">
            <h2 class="panel-title">{{ article.headline }}</h2>
            <br/><h2 class="panel-title">{{ article.date|date:"l jS F Y" }}</h2>
        </div>
        <div>
          {% if article.image %}
            <img src="{{ MEDIA_URL }}{{ article.image }}" class="article-image pull-right img-responsive col-md-· col-sm-6 col-xs-12" alt="{{ article.headline }}" />
          {% endif %}
          {{ article.text|safe }}
        </div>
      </div>
    </div>
  </div>
{% endblock %}

图像当前突出了面板的底部，使它看起来很奇怪。

文章形象的CSS很简单：

.article-image {padding: 0; margin-bottom: 20px;}
@media(min-width: 768px){.article-image {margin-left: 20px;}}

任何人都可以帮助理解为什么图像不能紧贴面板吗？

非常感谢，艾伦。

Answer 1

尝试将您的面板内容放在div class="panel-body"内并提供图片尺寸。像这样的东西

{% block content %}
<div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading">
            <h2 class="panel-title">{{ article.headline }}</h2>
            <br/><h2 class="panel-title">{{ article.date|date:"l jS F Y" }}</h2>
        </div>
        <div class="panel-body">
          {% if article.image %}
            <img src="{{ MEDIA_URL }}{{ article.image }}" class="article-image pull-right img-responsive col-md-· col-sm-6 col-xs-12" alt="{{ article.headline }}" />
          {% endif %}
          {{ article.text|safe }}
         </div>
        <div>
      </div>
    </div>
    </div>
</div>
{% endblock %}

CSS

.article-image {
    padding: 0; 
    margin-bottom: 20px;
    width: 50px; //whatever you want
    height: 50px; //whatever you want
}
@media(min-width: 768px){
    .article-image {
        margin-left: 20px;
    }
}

CSS：图像从Bootstrap面板中戳出来

1 个答案: