0
4つのクライアントを示すグリッドを作成しようとしました。大きなビューポートではまったく同じように見えますが、窓を小さくするとすぐに物が壊れたり崩壊したりすることはありません。この問題は、特に右上の2番目のクライアントボックスで発生します。ボックスナンバー4で隠されているようですが、私はなぜそれが見えません。ここブートストラップグリッドが間違った方法で崩壊する：要素が他の要素の上にある
はJSフィドルです：ここ
https://jsfiddle.net/c54nfk43/
は、CSSファイル（同じくらい悪い）ことなく、同じjsfiddleです：
https://jsfiddle.net/c54nfk43/1/
<?php include('header.php') ?>
<body>
<?php include('navigation.php') ?>
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 offset-sm-1" style="height:500px; margin-top:50px;">
<div class="row">
<div class="col-xs-12 col-lg-6 no-padding" style="background-color: white;">
<div class="left_box">
<div class="logo_wrapper">
<a href="http://www.test.com">
<img class="client-logo" src="img/logo.png" style="width:250px; height:auto; padding-top:15px;">
</a>
</div>
<p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
<p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
<p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
<p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
</div>
</div>
<div class="col-xs-12 col-lg-6 no-padding" style="background-color: #e7ecef;">
<div class="left_box">
<div class="logo_wrapper">
<a href="http://www.other.com">
<img class="client-logo" src="img/logo.svg" style="width:200px; height:auto;">
</a>
</div>
<p>Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. </p>
<p>Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad.</p>
<p>Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row hidden-sm-down" style="margin: 75px;">
</div>
<div class="row">
<div class="col-sm-10 offset-sm-1" style="height:500px; margin-top:50px;">
<div class="row">
<div class="col-xs-12 col-lg-6 no-padding" style="background-color: white;">
<div class="left_box">
<div class="logo_wrapper">
<a href="https://www.thirdclient.de">
<img class="client-logo" src="img/thirdlogo.jpg" style="width:250px; height:auto; padding-top:-20px;">
</a>
</div>
<p>The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
<p>The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
<p> The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
<p>The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
</div>
</div>
<div class="col-xs-12 col-lg-6 no-padding" style="background-color: #e7ecef;">
<div class="left_box">
<div class="logo_wrapper">
<a href="http://www.fourthclient.com/">
<img class="client-logo" src="img/fourthlogo.jpg" style="width:200px; height:auto;">
</a>
</div>
<p>Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. </p>
<p>Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. </p>
<p>Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. </p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include('footer.php') ?>