Bootstrap：行超出父容器并相互重叠
Posted
技术标签:
【中文标题】Bootstrap：行超出父容器并相互重叠【英文标题】：Bootstrap: rows are exceeding the parent containers and overlapping each other 【发布时间】：2021-01-15 23:05:03 【问题描述】：我正在尝试按照 codepen 所示进行引导设计。
当我查看codepen 时，一切正常：
Codepen_bootstrap
...但是当在我的浏览器（chrome 和 safari）中本地查看页面时，设计会被破坏，并且事情没有按应有的方式堆叠。
问题是，<div class="container thirdSection"> 没有像我想要的那样扩展。所以这个container-div里面的rows确实超出了容器的边界。
<div class="container fourthSection"> 内部也会发生同样的事情
本地设置是 Wordpress 在“Local by flywheel”上运行。
问题如下图所示。
Bootstrap_screenshot_1
Bootstrap_screenshot_2
Wordpress 会不会是问题所在？
index.php
<?php get_header(); ?>
<div class="container secondSection">
<div class="row firstRow">
<div class="col-sm-4 firstCol">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/fitsperfect.svg');?>" class="d-inline-block" >
</div>
<h2 class="pt-4 pb-4">100% correct</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quo blanditiis ut necessitatibus ad quisquam? Voluptas, molestiae nobis, cum obcaecati magni soluta numquam rerum quas nemo facere doloribus voluptates sint.</p>
</div>
<div class="col-sm-4 secondCol">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/like.svg');?>" class="d-inline-block" >
</div>
<h2 class="pt-4 pb-4">lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam praesentium itaque unde voluptatibus similique numquam repellendus earum aspernatur porro maiores veritatis, animi necessitatibus? Rerum sit sunt repudiandae ipsam mollitia est!</p>
</div>
<div class="col-sm-4 thirdCol p">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/secure.svg');?>" class="d-inline-block" >
</div>
<h2 class="pt-4 pb-4">lorem heading</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium, repellendus dignissimos. Minima sunt voluptatem et reprehenderit molestias dignissimos, facilis voluptate, sit rerum beatae, hic error deleniti accusantium unde possimus est!</p>
</div>
</div>
</div>
<div class="container thirdSection">
<div class="row firstRow pt-5 pb-5">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Five Steps from here to there</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum enim consequuntur a dolorum amet voluptatum, ducimus eveniet laboriosam voluptatem qui, asperiores nisi minus libero similique molestias animi eos quod totam odio dolores. Assumenda dicta eveniet modi ex velit dolorum cumque ut aperiam architecto? Culpa iusto officiis minima fugiat suscipit adipisci ab sed perspiciatis rerum eveniet doloremque, dicta quibusdam architecto labore ad laudantium? Quas voluptas rerum modi mollitia fuga tenetur nesciunt illo earum? Vitae hic sequi beatae, quasi, eligendi, magni ipsam libero velit non nobis illo mollitia molestiae. Sequi vitae doloribus iusto rerum tempora? In laborum perferendis dolores molestias suscipit! Voluptate necessitatibus, beatae a iure nesciunt odit officiis reiciendis, molestias sint sapiente optio error et quam maiores repudiandae minus, atque eaque soluta quasi provident illum? Numquam dignissimos autem dolore cumque laboriosam cum sapiente mollitia nesciunt quaerat labore ratione quod, corporis soluta natus porro eveniet eligendi et dolorum est ullam accusamus placeat?</p>
</div>
</div>
<div class="row secondRow pt-5 pb-5">
<div class="col-md-6 col-sm-12 secondCol">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/window-art@2x.png');?>" class="d-inline-block img-fluid" >
</div>
</div>
<div class="col-md-6 col-sm-12 thirdCol">
<ul class="list-display list-checkmarks">
<li ><span class="pfDinTextBold">This is a little bit of descripton</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, doloribus!</li>
<li ><span class="pfDinTextBold">This is a little bit more of a descripton</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, maiores.</li>
<li ><span class="pfDinTextBold">Takes some moer than describing</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, recusandae.</li>
<li ><span class="pfDinTextBold">Stripes are a better design then dots</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, deleniti.</li>
</ul>
<ul class="list-display listButton pt-4">
<li ><span><button type="button" class="btn buttonRed btn-block">configure button</button></span></li>
</ul>
</div>
</div>
</div>
<div class="container fourthSection">
<div class="row firstRow pt-5 pb-5">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Just the best for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nulla laborum nesciunt! Nam possimus amet quas nesciunt saepe non veritatis molestiae optio. Est a dicta placeat impedit recusandae, ipsum exercitationem blanditiis nostrum atque optio pariatur? Numquam illum eius, a eveniet ex et consequatur inventore in modi quibusdam, at repudiandae voluptatem. Adipisci odio dolor laudantium culpa quis debitis sint quae temporibus.</p>
</div>
</div>
<!-- <div class="row firstRow pt-5 pb-5 order-1"> -->
<div class="container-fluid mt-4">
<div class="row justify-content-center">
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
<a href="#" class="card-link">ⓘ detailled data</a>
<a href="#" class="card-link">Another link</a>
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
<a href="#" class="card-link">ⓘ detailled data</a>
<a href="#" class="card-link">Another link</a>
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
<a href="#" class="card-link">ⓘ detailled data</a>
<a href="#" class="card-link">Another link</a>
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
<a href="#" class="card-link">ⓘ detailled data</a>
<a href="#" class="card-link">Another link</a>
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
<a href="#" class="card-link">ⓘ detailled data</a>
<a href="#" class="card-link">Another link</a>
<p class="card-text">5m</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container fifthSection">
<div class="row firstRow pt-5 pb-5 order-2">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Some free samples?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium perspiciatis itaque quidem ex, aperiam, debitis natus eos ullam corporis quos a aliquid ratione officia cumque veritatis quas ipsam rem cupiditate harum, quo illum. Voluptatum itaque odit deleniti voluptatibus quia quam.</p>
<span><button type="button" class="btn buttonYellow btn-block">Configuration</button></span>
</div>
</div>
</div>
<div class="container sixthSection">
<div class="row SecondRow pt-5 pb-5">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Some text goes here</h2>
</div>
</diy>
<div class="row SecondRow pt-5 pb-5">
<div class="col-md-4 FirstCol">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi libero rerum explicabo? Incidunt laborum adipisci inventore ipsam expedita blanditiis sapiente atque tenetur? Provident facilis tempora ipsam veniam magnam nulla harum, eum fuga! Quis illum natus itaque nihil nulla hic molestiae doloribus molestias ab minus laborum exercitationem iure, sunt temporibus, provident ea maiores praesentium in beatae dolore fugiat alias mollitia adipisci at? Officia id nemo placeat, consectetur repellendus vel error beatae itaque, quibusdam hic maxime reprehenderit laudantium corporis. Dicta, sapiente consequatur, nisi veritatis rerum nesciunt consequuntur iusto qui esse autem soluta quam ipsam! Ut voluptatem doloribus nulla, assumenda praesentium distinctio laudantium reiciendis perferendis natus eveniet consequuntur minus at earum ex voluptatum asperiores, nesciunt, quisquam libero tempora? Asperiores molestias blanditiis, nobis minima architecto ea consequuntur minus nemo dolores perspiciatis, officia optio numquam aliquam placeat vel quia accusamus magni, laboriosam suscipit quaerat sit non odit adipisci molestiae. Deleniti rerum reprehenderit eius facere dolore.
</p>
</div>
<div class="col-md-4 SecondCol">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, sint obcaecati earum rerum dolore adipisci numquam exercitationem repudiandae quis, officiis sit? Nulla voluptatem sint incidunt. Perspiciatis aut sed alias aliquam, illum aliquid repudiandae cupiditate perferendis placeat harum repellendus enim accusamus, optio consequuntur officiis. Perspiciatis quam exercitationem quaerat neque, quidem voluptatem soluta numquam commodi voluptatum laudantium harum totam doloribus quibusdam? Vitae eveniet, at dolorum animi consectetur impedit earum dicta exercitationem accusamus autem pariatur doloremque optio suscipit ipsam maiores nam atque culpa incidunt deleniti. Modi nulla harum quae suscipit. Sint, inventore soluta eaque aperiam, nobis omnis aliquid quo quas consectetur veniam at quasi recusandae quaerat est eum fugit voluptatibus autem odit suscipit tempora error mollitia dignissimos incidunt in. Nihil expedita natus rem necessitatibus culpa corrupti ab, laborum earum magni quo. Voluptatum doloribus eligendi odio vitae dolorem aspernatur veniam itaque, laboriosam doloremque ea autem. Repellat dolor asperiores dolore voluptates excepturi, at nobis delectus!
</p>
</div>
<div class="col-md-4 ThirdCol">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat suscipit ad id voluptatem. Cupiditate nesciunt accusamus vero ea mollitia velit laudantium iusto, ipsa quibusdam, aliquid accusantium doloremque nulla quo numquam ducimus nostrum fugit labore iure saepe error? Odio officia, voluptatum cum architecto, natus hic veritatis sequi quae blanditiis molestiae, pariatur culpa. Officia voluptas earum reprehenderit ab accusantium nam iste sequi nesciunt ea laborum non aliquid eligendi, quaerat deleniti, necessitatibus sunt minima reiciendis. Dolore eum ipsam molestias nisi tenetur, enim quia corporis repellat, dolorem hic debitis. A reprehenderit voluptas dignissimos exercitationem laboriosam rerum distinctio consectetur qui recusandae natus, repellendus vitae quas, doloribus impedit mollitia, nihil veritatis quidem. Est, cum ipsam provident distinctio excepturi pariatur quasi labore perferendis unde ut, ullam possimus non fugiat a odio, rerum ab minus maxime architecto accusantium. Similique, sapiente ad! Ea delectus quis temporibus expedita natus quae nesciunt officia, architecto unde similique, facilis est aut! Quibusdam voluptatibus praesentium perspiciatis, voluptatum atque suscipit perferendis corporis sit dignissimos asperiores recusandae minus delectus nesciunt! Dicta necessitatibus similique veniam rerum beatae eligendi, inventore exercitationem autem id saepe quisquam est sequi cum aspernatur ipsa accusantium aut delectus harum nulla, quis facilis. Magnam ab, doloremque commodi obcaecati quam vero fugiat ea deserunt quis.
</p>
</div>
</div>
</div>
<?php
get_footer();
?>
header.php
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head();?>
</head>
<body>
<header>
<div class="container">
<div class="container topSection">
<div class="row justify-content-center mt-0 pt-0 pb-0">
<div class="col-sm-12 d-flex justify-content-center">
<span class="topSection d-flex align-items-center"><img src="<?php echo get_theme_file_uri('/images/icons8-in_transit copy.svg');?>" class="d-inline-block mr-1" loading="lazy"> Fsat shipping from our warehouse</span>
</div>
</div>
</div>
<div class="container">
<div class="row rowSectionNav align-items-center">
<div class="col-sm-12 justify-content-center">
<nav class="navbar navbar-expand-lg navbar-light bg-white navNoPaddingMargin">
<a class="navbar-brand d-flex align-items-center brandName" href="#"><img src="<?php echo get_theme_file_uri('/images/fensterfolie.svg');?>" class="d-inline-block align-top mr-2" loading="lazy">Logo <span style="color: #FF5A6E;font-family: Uni-Sans-Bold; font-size: 1.6rem" >+</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="nav collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Start</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
footer.php
<!-- Footer -->
<footer class="page-footer font-small mdb-color lighten-3 pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mb-4">About</h5>
<ul class="list-unstyled">
<li>
<p>
<a href="#!">Link1</a>
</p>
</li>
<li>
<p>
<a href="#!">Link2</a>
</p>
</li>
<li>
<p>
<a href="#!">Link3</a>
</p>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mb-4">Support</h5>
<ul class="list-unstyled">
<li>
<p>
<a href="#!">contact us</a>
</p>
</li>
<li>
<p>
<a href="#!">FAQ</a>
</p>
</li>
<li>
<p>
<a href="#!">Delivers</a>
</p>
</li>
<li>
<p>
<a href="#!">Payment</a>
</p>
</li>
<li>
<p>
<a href="#!">Business</a>
</p>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-4 col-lg-3 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Contact details -->
<h5 class="font-weight-bold text-uppercase mb-4">Our services</h5>
<ul class="list-unstyled">
<li>
<p>
<i class="fas fa-home mr-3"></i>free shipping</p>
</li>
<li>
<p>
<i class="fas fa-envelope mr-3"></i>correct</p>
</li>
<li>
<p>
<i class="fas fa-phone mr-3"></i>Simplicity</p>
</li>
<li>
<p>
<i class="fas fa-print mr-3"></i>Warranty</p>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 text-center mx-auto my-4">
<!-- Social buttons -->
<h5 class="font-weight-bold text-uppercase mb-4">delivery</h5>
<!-- Facebook -->
<a type="button" class="btn-floating btn-fb">
<i class="fab fa-facebook-f"></i>
</a>
<!-- Twitter -->
<a type="button" class="btn-floating btn-tw">
<i class="fab fa-twitter"></i>
</a>
<!-- Social buttons -->
<h5 class="font-weight-bold text-uppercase mb-4">Secure</h5>
<!-- Google +-->
<a type="button" class="btn-floating btn-gplus">
<i class="fab fa-google-plus-g"></i>
</a>
<!-- Dribbble -->
<a type="button" class="btn-floating btn-dribbble">
<i class="fab fa-dribbble"></i>
</a>
</div>
</div>
<!-- Grid column -->
<!-- Grid row -->
<div class="row">
<div class="col-md-2 col-lg-2 text-center mx-auto my-4">
<h5 class="font-weight-bold text-uppercase mb-4">Payments</h5>
<span><img src="<?php echo get_theme_file_uri('/images/paypal@2x.png');?>" class="d-inline-block img-fluid" ></span>
<span><img src="<?php echo get_theme_file_uri('/images/sofort@2x.png');?>" class="d-inline-block img-fluid" ></span>
<span><img src="<?php echo get_theme_file_uri('/images/mastercard@2x.png');?>" class="d-inline-block img-fluid" ></span>
<span><img src="<?php echo get_theme_file_uri('/images/Visa@2x.png');?>" class="d-inline-block img-fluid" ></span>
</div>
</div>
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> blabla.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<?php wp_footer();?>
</div>
</body>
</html>
functions.php
<?php
function wpbootstrap_enqueue_styles()
wp_enqueue_style('boostrap_V4','https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
wp_enqueue_style('font-awesome-new','https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_script('bootstrap_jquery', '//code.jquery.com/jquery-3.5.1.slim.min.js');
wp_enqueue_script('bootstrap_popper', '//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js');
wp_enqueue_script('bootstrap_js', '//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js');
add_action('wp_enqueue_scripts', 'wpbootstrap_enqueue_styles');
function flt_files()
wp_enqueue_style('fensterfolie_main_styles', get_stylesheet_uri());
add_action('wp_enqueue_scripts', 'flt_files');
?>
【问题讨论】：
请添加更多解释而不是所有代码 【参考方案1】：问题已解决：是否将以下内容添加到每个人 div-container：
.containerClass
min-height: 100%
【讨论】：
以上是关于Bootstrap：行超出父容器并相互重叠的主要内容，如果未能解决你的问题，请参考以下文章
我有一个相互重叠的 flex 包装 div 容器。这些可能是不同的高度并包裹多次。如何避免重叠？