堆栈内存溢出
  繁体   English   中英

移动视图中的Bootstrap 4重叠列

[英]Bootstrap 4 Overlapping Columns in Mobile View

 原文  2018-07-19 07:52:50  0   1    html/ twitter-bootstrap/ responsive-design/ bootstrap-4/ responsive

问题描述

因此，我知道这似乎是一个相当简单的功能，但是我花了几天多的时间才尝试使它生效。 一切都可以在全宽度上很好地工作，但是我已经尝试过使用col-xs-12 col-sm-12 col-md-6 col-lg-4进行多种不同的合理配置（请参阅此处以及我在许多其他地方试图找到答案）等，但似乎无法使列从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扩展文本区域的一些东西。 其他内容应为内联。

UPDATE

好的，找出了我的一些问题，但是介绍了一个老问题。 所做的更改：
1.将行移至col-12之外2.将img响应更改为img-fluid 3.移除card-columns div 4.移除多余的行div（我不认为这是我的原始作品，我认为这是复制/粘贴期间发生意外，因为也没有结束标签）

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

（不应在红色X处有多余的空间） 在此处输入图片说明

并且应该像这样流动：

在此处输入图片说明

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

在此处输入图片说明

1 个解决方案

解决方案1
 1 已采纳  2018-07-19 08:38:16

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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 引导列在移动设备上相互重叠 Bootstrap 列在移动设备上相互重叠 在移动视图上切换引导列 在移动视图中对齐Bootstrap 4列 Bootstrap 列在移动视图中未对齐 Bootstrap-vue 列在较小的移动设备上重叠 Bootstrap 4导航栏在手机上重叠 如何根据移动视图重新排序引导列 引导网格列重叠 bootstrap列重叠
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM