BootStrap 行内容在移动视图中粘在左侧答案

【问题标题】：BootStrap Row Content Stick to Left in Mobile ViewBootStrap 行内容在移动视图中粘在左侧
【发布时间】：2020-08-28 06:41:37
【问题描述】：

我正在使用 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>

【问题讨论】：

请向我们展示这段代码生成的 HTML，以便我们查看它的外观。

标签： html css bootstrap-4

【解决方案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 system 并使用容器、行和列，这样您就不需要这些百分比- 基于填充和内联样式。

【讨论】：

【解决方案2】：

试试下面的 sn-p：

<h3 style="padding-left: 8%; padding-top: 2%; font-family: 'Verdana';">Your Listen Later</h3>
<div class="container">
    {% for i in watch reversed %}
    <div class="row mx-auto">
        <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>
    {% endfor %}
</div>

我添加了一个带有container 类的<div>，并将for 语句中的<div> 更改为具有row 和mx-auto 的类。

container Bootstrap 类确定这是主要包含网站所在的位置。在此内容中，将有rows和columns等网格类。

因为每个row 只需要一个元素，所以<div> 的columns 类没有用处；每个独立条目都有自己的row。

mx-auto Bootstrap 类将通过将左右边距设置为自动来居中图像。

但是，提供的此解决方案仅适用于移动视图。下面是一个资源，研究如何根据您使用的设备更改样式：Change Styles based on Display Size。

确保您实现了根据此尺寸从一种布局切换到另一种布局的功能。我通常会使用 PHP，根据当前大小显示不同的代码/样式。

【讨论】：