首先让我这样说：这不是Bootstrap col-sm making content disappear的重复。我已经检查过我是否错过了任何rows，但这些都很好。
话虽如此，我使用24列引导程序，并添加任何col-xs类使我的内容不可见。我可以看到萤火虫上的图像和按钮，但它们在碎石上看不到。在列类上禁用float:left会使内容再次可见。我已经使用firefox，chrome和MS Edge进行了检查，并得到了相同的结果。受影响的块的HTML：
<div class="container">
<section id="content-promoted">
<div class="row">
<div class="col-sm-24">
<h2>Originals</h2>
</div>
</div>
<div class="row bg-dark p-tb-sm">
<!--start looping-->
<div class="col-md-6 col-xs-10">
<div class="block">
<img src="{{ asset('bundles/web/images/p-1.png') }}" class="img-responsive">
<div class="block-content p-a-sm">
<h4 class="name">Name</h4>
<p class="artist">Artists</p>
<div class="block-meta">
<button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button>
<button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>
<button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>
</div>
</div>
</div>
</div>
<!--end looping-->
<div class="col-md-6 col-xs-10">
<div class="block">
<img src="{{ asset('bundles/web/images/p-1.png') }}" class="img-responsive">
<div class="block-content p-a-sm">
<h4 class="name">NAme</h4>
<p class="artist">artists</p>
<div class="block-meta">
<button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button>
<button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>
<button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>
</div>
</div>
</div>
</div>
<div class="col-md-6 landscape">
<div class="block">
<img src="{{ asset('bundles/web/images/p-2.jpg') }}" class="img-responsive">
<div class="block-content p-lr-sm p-tb-xs">
<h4 class="name">name</h4>
<p class="artist">artists</p>
<div class="block-meta">
<button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button>
<button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>
<button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>
</div>
</div>
</div>
<div class="block">
<img src="{{ asset('bundles/web/images/p-2.jpg') }}" class="img-responsive">
<div class="block-content p-lr-sm p-tb-xs">
<h4 class="name">Name</h4>
<p class="artist">artists</p>
<div class="block-meta">
<button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button>
<button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>
<button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>
</div>
</div>
</div>
</div>
<div class="col-md-6 landscape">
<div class="block">
<img src="{{ asset('bundles/web/images/p-3.jpg') }}" class="img-responsive">
<div class="block-content p-lr-sm">
<h4 class="name">name</h4>
<p class="artist">artists</p>
<div class="block-meta">
<button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button>
<button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>
<button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>
</div>
</div>
</div>
<div class="block">
<img src="{{ asset('bundles/web/images/p-3.jpg') }}" class="img-responsive">
<div class="block-content p-lr-sm">
<h4 class="name">name</h4>
<p class="artist">artists</p>
<div class="block-meta">
<button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button>
<button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>
<button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>
</div>
</div>
</div>
<div class="block">
<img src="{{ asset('bundles/web/images/p-3.jpg') }}" class="img-responsive">
<div class="block-content p-lr-sm">
<h4 class="name">name</h4>
<p class="artist">artists</p>
<div class="block-meta">
<button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button>
<button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button>
<button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="content-carousels">
<div class="row">
<!--this is the looped div-->
<div class="col-sm-24">carousel</div>
</div>
</section>
<!--container end-->
</div>
和CSS：
.block{background: black;}
.landscape .block{margin-top: 10px;}
.landscape .block:first-child{margin-top:0;}
.block img{border-bottom: 2px solid #00adef; }
.block-meta{border-top:1px solid #151515;}
.block .btn-clear{background: none;border:none; margin: 0;padding: 0; border-radius: 0;text-align:left; font-size: 12px;}
此代码中的详细代码：http://codepen.io/samia92/pen/RRJEmB。调整窗口大小以触发“超小分辨率，前两个块消失！”
答案 0 :(得分：0)
问题是在代码中，xs个屏幕的最后2列没有任何Bootstrap的网格类。因此，在超小屏幕上，前两列正在浮动，而其余两列不浮动并覆盖在前两列上。
您的代码结构应如下所示：
<div class="row bg-dark p-tb-sm">
<div class="col-md-6 col-xs-10"></div>
<div class="col-md-6 col-xs-10"></div>
<div class="col-md-6 landscape col-xs-10"></div>
<div class="col-md-6 landscape col-xs-10"></div>
</div>
答案 1 :(得分：0)
如果你不想让事情搞砸，你应该制作12格的网格
在大视图中你有
col-sm-6 + col-sm-6
但是在xs视图中你有col-xs-10 + col-xs-10所以它被弄乱了。