讓我先說:這不是Bootstrap col-sm making content disappear的重複。我檢查過是否有錯,但這些都沒有問題。bootstrap col-xs使內容不可見
說了這樣的話,我使用了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;}
詳細的代碼是在這裏在這個codepen:http://codepen.io/samia92/pen/RRJEmB。調整窗口大小以觸發「超小分辨率,前兩個塊消失!
name3有'col-md-6'類,所以它覆蓋name1和大部分name2 - 修復它或添加'z-index:1'到name1和name2 –
我想通了。那加上另一個div是由jquery創建的。今天是我搞糟簡單事情的一天! –