Question

我想要实现的目标：在我的base.html中，我想创建一张卡片，将所有页面上的主要内容放在一个漂亮的边框内。但是：此边框不应出现在小于md-Devices上，以使内容不会超小。

我尝试了什么：

base.html文件

  <div class="card d-none d-lg-block">
  <div class="card-body d-none d-lg-block">


     {% block content %}
     {% endblock %}

       </div>
</div>

   <div class="d-md-none">
  <div class="d-md-none">


     {% block content %}
     {% endblock %}

       </div>
</div>

这当然会带来以下错误：

TemplateSyntaxError at /

'block' tag with name 'content' appears more than once

但我怎么能实现呢？任何意见都非常感谢！

Answer 1

这会将您的卡隐藏在小于中等的所有设备上：

<div class="card d-none d-md-block">
<div class="card-body d-none d-md-block">
    {% block card %}
    {% endblock %}

</div>
</div>

<div>
    {% block content %}
    {% endblock %}
</div>

请参阅bootstrap以获取参考documentation

要仅在给定的屏幕大小间隔上显示元素，您可以将一个.d- -none类与.d - - *类组合在一起，例如.d-none .d- md-block .d-xl-none将隐藏所有屏幕尺寸的元素，中型和大型设备除外。

已编辑添加此链接https://getbootstrap.com/docs/4.1/utilities/display/，您可能会发现这些链接也很有帮助。

Django和Bootstrap：仅限大型设备上的卡

1 个答案: