html - BootStrap 行内容在移动视图中粘在左侧

Question

我正在使用 Bootstrap 创建一个网页。

此网页显示了在桌面视图中按预期显示的卡片列表，但在切换到移动视图时，卡片以不希望的方式显示。

在移动视图中，卡片粘在显示屏的左侧。我希望这些被集中。

下面是显示问题的图像以及控制卡的代码：

桌面视图：

移动视图：

卡号：

<h3 style="padding-left: 8%; padding-top: 2%; font-family: 'Verdana';">Your Listen Later</h3>
<div class="row" style="padding-left: 7%;">
    {% for i in watch reversed %}
    <div style="padding-left: 2%; padding-top: 1%;">
        <div class="card" style="width: 18rem;">
            <img src="{{i.image}}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">{{i.name}}</h5>
                <p class="card-text" style="color: green;">Tags: {{i.tags}}</p>
                <p class="card-text" style="color: green;">Movie: {{i.movie}}</p>
                <a href="/musicbeats/songs/{{i.song_id}}" class="btn btn-outline-danger ">Listen Song</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

标签： htmlcssbootstrap-4

Answer 1

您可以尝试在左右两侧添加相同的填充，.row使间距对称。然后div在.card全宽之前制作并再次添加相同的侧边距：

<h3 style="padding-left: 8%; padding-top: 2%; font-family: 'Verdana';">Your Listen Later</h3>
  <div class="row" style="padding-left: 7%; padding-right: 7%;">
    {% for i in watch reversed %}
    <div style="padding-left: 2%; padding-right:2%; padding-top: 1%; width:100%">
    <div class="card" style="width: 18rem;">
      <img src="{{i.image}}" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">{{i.name}}</h5>
        <p class="card-text" style="color: green;">Tags: {{i.tags}}</p>
        <p class="card-text" style="color: green;">Movie: {{i.movie}}</p>
        <a href="/musicbeats/songs/{{i.song_id}}" class="btn btn-outline-danger ">Listen Song</a>
      </div>
    </div>
  </div>
  {% endfor %}
  </div>

一般来说，我不会推荐您一直使用的方法 - 因为您可以使用 Bootstrap，您可以熟悉Grid 系统并利用容器、行和列，这样您就不需要那些基于百分比的填充和内联样式。