移动视图中的 Bootstrap 4 重叠列答案

【问题标题】：Bootstrap 4 Overlapping Columns in Mobile View移动视图中的 Bootstrap 4 重叠列
【发布时间】：2018-12-27 06:28:43
【问题描述】：

所以，我知道这似乎是一个相当简单的功能，但我花了几天多的时间试图让它发挥作用。一切都很好，但我已经尝试了col-xs-12 col-sm-12 col-md-6 col-lg-4 的许多不同的合理配置，（参见here 和我尝试找到答案的许多其他地方）等等，但似乎无法得到列从 3 下降到 2 到 1。我认为这是别的东西。它将在纵向模式下转到 1 列，但横向会重叠。也不知道为什么屏幕截图中的中心容器没有完全居中（它在右边）。

那就直接说吧：

截图：

横向重叠：

纵向单列：

在全桌面范围内正常：

HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/style.css">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic HTML File</title>
  </head>
  <body style="background-color:#F4F7F6;">
    <div class="container">
      <div class="row" style="padding-top:2%;">
        <div class="col-md-12">
          <h1><center>Webpage Title</center></h1>
        </div>
      </div>
      <div class="container-fluid"><div class="card-columns"><div class="row">
          <div class="row">
             <div class="col-xs-4 col-sm-4 col-md-6">
               <div class="card" style="width: 20rem;">
                 <div class="img-round">
                   <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-responsive" style="width:100%;border-radius:5px 5px 0 0;"></a>
                 </div>
                 <div class="card-body">
                   <h4 class="card-title">Card Title</h4>
                   <p class="card-text" style="overflow:hidden;text-overflow:ellipsis;">
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   </p>
                 </div>
               </div>
             </div>
         </div>
         <div class="row">
           <div class="col-xs-4 col-sm-4 col-md-6">
               <div class="card" style="width: 20rem;">
                 <div class="img-round">
                   <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-responsive" style="width:100%;border-radius:5px 5px 0 0;"></a>
                 </div>
                 <div class="card-body">
                   <h4 class="card-title">Card Title</h4>
                   <p class="card-text" style="overflow:hidden;text-overflow:ellipsis;">
                       Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                       Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                       Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   </p>
                 </div>
               </div>
           </div>
         </div>
         <div class="row">
             <div class="col-xs-4 col-sm-4 col-md-6">
               <div class="card" style="width: 20rem;">
                 <div class="img-round">
                   <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-responsive" style="width:100%;border-radius:5px 5px 0 0;"></a>
                 </div>
                 <div class="card-body">
                   <h4 class="card-title">Card Title</h4>
                   <p class="card-text" style="overflow:hidden;text-overflow:ellipsis;">
                       Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                       Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                       Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   </p>
                 </div>
               </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xs-4 col-sm-4 col-md-6">
               <div class="card" style="width: 20rem;">
                 <div class="img-round">
                   <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-responsive" style="width:100%;border-radius:5px 5px 0 0;"></a>
                 </div>
                 <div class="card-body">
                   <h4 class="card-title">Card Title</h4>
                   <p class="card-text" style="overflow:hidden;text-overflow:ellipsis;">
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   </p>
                 </div>
               </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xs-4 col-sm-4 col-md-6">
               <div class="card" style="width: 20rem;">
                 <div class="img-round">
                   <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-responsive" style="width:100%;border-radius:5px 5px 0 0;"></a>
                 </div>
                 <div class="card-body">
                   <h4 class="card-title">Card Title</h4>
                   <p class="card-text" style="overflow:hidden;text-overflow:ellipsis;">
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   </p>
                 </div>
               </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xs-4 col-sm-4 col-md-6">
               <div class="card" style="width: 20rem;">
                 <div class="img-round">
                   <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-responsive" style="width:100%;border-radius:5px 5px 0 0;"></a>
                 </div>
                 <div class="card-body">
                   <h4 class="card-title">Card Title</h4>
                   <p class="card-text" style="overflow:hidden;text-overflow:ellipsis;">
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   </p>
                 </div>
               </div>
             </div>
         </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </body>
</html>

CSS：

没有明显的自定义，只是模块 div 扩展文本区域的一些东西。其他东西应该是内联的。

更新

好的，解决了我的一些问题，但引入了一个旧问题。所做的更改：
1. 将行移到 col-12 之外 2.将img-responsive改为img-fluid 3.删除卡片列div 4.删除多余的行div（我不认为这是我原来的工作，我认为这是复制/粘贴过程中的意外，因为也没有结束标签）

但是，这重新引入了我之前遇到的问题，即卡片没有垂直流动，文字不均匀。并非所有文本的长度都相同，因此删除 text-truncate 指令会呈现以下结果：

（红色 X 所在的位置不应有多余的空间）

应该像这样流动：

此外，虽然高级卡片列从 3 -> 2 折叠（太棒了！），但在与此过渡期接壤的分辨率上仍有一些重叠（见下面的屏幕截图，有些在上面的屏幕截图中也可见），所以我认为我需要强制执行最小边框/填充：

【问题讨论】：

标签： html twitter-bootstrap responsive-design bootstrap-4 responsive

【解决方案1】：

HTML 结构中存在一些问题。我试过修改它。现在我们可以整合您的意图。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />


<body style="background-color:#F4F7F6;">
  <div class="container">
    <div class="row" style="padding-top:2%;">
      <div class="col-md-12">
        <h1>
          <center>Webpage Title</center>
        </h1>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="img-round">
              <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-fluid" style="border-radius:5px 5px 0 0;"></a>
            </div>
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text text-truncate" style="overflow:hidden;text-overflow:ellipsis;">
                Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra
                Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
              </p>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="img-round">
              <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-fluid" style="border-radius:5px 5px 0 0;"></a>
            </div>
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text text-truncate" style="overflow:hidden;text-overflow:ellipsis;">
                Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
              </p>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="img-round">
              <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-fluid" style="border-radius:5px 5px 0 0;"></a>
            </div>
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text">
                Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
              </p>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="img-round">
              <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-fluid" style="border-radius:5px 5px 0 0;"></a>
            </div>
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text text-truncate" style="overflow:hidden;text-overflow:ellipsis;">
                Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra
                Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
              </p>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="img-round">
              <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-fluid" style="border-radius:5px 5px 0 0;"></a>
            </div>
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text text-truncate" style="overflow:hidden;text-overflow:ellipsis;">
                Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
              </p>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="img-round">
              <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-fluid" style="border-radius:5px 5px 0 0;"></a>
            </div>
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text text-truncate" style="overflow:hidden;text-overflow:ellipsis;">
                Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

</body>

【讨论】：

感谢您的回答，看来是在正确的轨道上。原谅我，也许我累了，我得稍后再看一遍，但我很难看到我原来的工作中的明显问题。我看到您更改了列（我尝试了您在col-12 col-md-6 col-lg-4 之前提供的列），还删除了卡片列，并从最后删除了 JS（不确定这是否重要）。如果我手动影响这些更改，它仍然不起作用。但是，如果我复制/粘贴您的样本，它会这样做。你能指出你提到的html结构问题吗？谢谢...花了这么多时间。
我看到您还删除了可折叠面板，这是否会导致移动模式下的尺寸问题？如果是这样，我将需要解决这个问题。
我建议您将代码添加到我结构中的相关位置。如果您仍然遇到任何问题，我可以在那里为您提供帮助。
好的。找出您所做的一些其他更改。惊人的！但是，之前的问题被重新引入了文本截断标记（文本将具有不同的长度），并且我还需要在列之间强制设置边界以防止在边界分辨率处重叠。请参阅上面的更新，我们可以将其标记为已回答和赞成。再次感谢您的帮助。
所以我想这是我原来的卡片列问题的根源：stackoverflow.com/questions/34140793/…。不幸的是，添加建议的 CSS 媒体指令没有效果。目前不知道该走哪条路。