Bootstrap高度浮动

最新推荐文章于 2024-03-12 12:00:00 发布

weixin_45643442

最新推荐文章于 2024-03-12 12:00:00 发布

阅读量354

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_45643442/article/details/116101781

版权

博客介绍了在Bootstrap中遇到同一row内div高度不一致导致的浮动问题，以及如何通过结合.clearfix和响应式工具类来解决这个问题。作者通过实例展示了修改前后的效果，并分享了在不同屏幕尺寸下设置清除浮动的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同一个row中div高度不一致导致浮动

即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和响应式工具类。

修改前

样式如下

<div class="row">
     <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
     <h2>《国故论衡》章太炎</h2>
     <p>“国学”一词，最早出自章太炎先生《国故论衡》及《国学概论》的演讲，它以先秦经典和诸子学说为根基.涵盖两汉经学、魏晋玄学、隋唐佛学、宋明理学和同时期的汉赋、六朝骈文、唐诗、宋词、元曲与明清小说以及历代史学等内容，形成了恢宏的“经”、“史”、“子”、“集”四大部分，其内涵源远流长，博大精深。</p>
     <p><a class="btn btn-def" href="#">阅读</a></p>
     </div>
     <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
     <h2>《红玫瑰与白玫瑰》张爱玲</h2>
     <p>张爱玲特别在哪里？我喜欢的教授许子东说：鲁迅是一座山，很高的山，后来的作家都想做一座山，可是没有一座山的高度能够超越鲁迅，中国的现代文学是在“山区”的，张爱玲不一样，张爱玲是一条河，山区里的一条河，所以她不一样。</p>
     <p><a class="btn btn-def" href="#">阅读</a></p>
     </div>
       
     <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
     <h2>《雪国》川端康成</h2>
     <p>《雪国》里有一种只可意会的美，文字是无法介绍出来的。记得男主从车窗玻璃窥探女主的容颜还有那悠长的隧道将雪国与现世隔绝起来，这本书美的像一首悲情漫漫的长诗。如果你只能读一本日本作家的书，我推荐川端康成，如果你只能读川端康成的一本书，我推荐《雪国》。</p>
     <p><a class="btn btn-def" href="#">阅读</a></p>
     </div>

     <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
     <h2>《饥饿艺术家》卡夫卡</h2>
     <p>卡夫卡的文字如同迷宫与深水，你永远不知道下一段会发生什么，喜欢他的人将其敬若神明，不喜欢他的人简直一段也读不下去。身前默默无名，死后震惊世界。几乎是二十世纪所有伟大作家的精神导师。</p>
     <p><a class="btn btn-def" href="#">阅读</a></p>
     </div>
     
     <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
     <h2>《战争与和平》托尔斯泰</h2>
     <p>他篇幅巨大，人物庞杂，展现了十九世纪俄国的众生相，如同《红楼梦》之于中国，《战争与和平》实在是北亚民族的百科全书。思虑深远，立意甚高，不仅仅是对拿破仑战争的深刻总结，而且对战争与和平，人类善与恶、美与丑，进行了一次次启迪后世的大讨论。读完《战争与和平》这本书以后，你的审美水平真的会提高很多，再读一般作家写的作品，味同嚼蜡。</p>
     <p><a class="btn btn-def" href="#">阅读</a></p>
     </div>
     <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
     <h2>《神曲》但丁</h2>
     <p>分为天国篇、炼狱篇、地狱篇，要是没有那么多时间，只读地狱篇就好了，地狱篇是最经典的。地狱的构造如同倒置的环形剧场，共九层，每层都是不同的罪行和受刑方法。炼狱的构造是一座世间最雄伟的山峰，虽然对应七宗罪，但炼狱山也是九层。天国的构想来源于托勒密的天文系统，每层都是不同有善举的人，有开明君主、殉道者、教士等等，同样是九层，第九层居住的是天使。</p>
     <p><a class="btn btn-def" href="#">阅读</a></p>
     </div>
 </div>

在这里插入图片描述

##修改后

<div class="row">
    <div class="col-sm-9">
    <div class="jumbotron">
    <h1>为什么要阅读？</h1>
    <p>我读过很多书，但后来大部分都被我忘记了，那阅读的意义是什么？</p>
    <p>就好像，当我还是孩子时，我吃过很多食物，现在已经记不起来吃过什么了。但可以肯定的是，它们当中的一部分已经长成了我的骨头和肉。这就是阅读的意义。</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">一起阅读吧</a></p>
    </div>
    <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
    <h2>《国故论衡》章太炎</h2>
    <p>“国学”一词，最早出自章太炎先生《国故论衡》及《国学概论》的演讲，它以先秦经典和诸子学说为根基.涵盖两汉经学、魏晋玄学、隋唐佛学、宋明理学和同时期的汉赋、六朝骈文、唐诗、宋词、元曲与明清小说以及历代史学等内容，形成了恢宏的“经”、“史”、“子”、“集”四大部分，其内涵源远流长，博大精深。</p>
    <p><a class="btn btn-def" href="#">阅读</a></p>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
    <h2>《红玫瑰与白玫瑰》张爱玲</h2>
    <p>张爱玲特别在哪里？我喜欢的教授许子东说：鲁迅是一座山，很高的山，后来的作家都想做一座山，可是没有一座山的高度能够超越鲁迅，中国的现代文学是在“山区”的，张爱玲不一样，张爱玲是一条河，山区里的一条河，所以她不一样。</p>
    <p><a class="btn btn-def" href="#">阅读</a></p>
    </div>
    /*添加的*/
    <div class="clearfix visible-xs visible-sm"></div>
    
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
    <h2>《雪国》川端康成</h2>
    <p>《雪国》里有一种只可意会的美，文字是无法介绍出来的。记得男主从车窗玻璃窥探女主的容颜还有那悠长的隧道将雪国与现世隔绝起来，这本书美的像一首悲情漫漫的长诗。如果你只能读一本日本作家的书，我推荐川端康成，如果你只能读川端康成的一本书，我推荐《雪国》。</p>
    <p><a class="btn btn-def" href="#">阅读</a></p>
    </div>
    <!-- Add the extra clearfix for only the required viewport -->
   <div class="clearfix visible-md visible-lg"></div>
</div>

在这里插入图片描述

要点

在小屏的时候是两列，而我有六个，所以我在2和4后面添加清除浮动，在大屏分三列，所以在3后面清除，主要清除浮动的语句是不一样的，因为我想要看到一直正确排列，所以把四种屏幕都做了设定。
自己看网上教程真的是，例子不够，完全不懂，就看方法自己一步步试，试出来正确语句，所以马上就发出来造福大家。虽然这不利于语义化，但是官方给的也是这个方案，就照做了。