CSS Bootstrap：加入右拉後行數變爲1px的高度

我想要以sm,md和lg設備爲中心並佔用屏幕一半的網格，並在xs設備上全屏顯示。所以我有這樣的佈局：CSS Bootstrap：加入右拉後行數變爲1px的高度

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6 col-sm-offset-3" > 
      <a href="#" > 
       <img class="img-responsive pull-right" src="/images/logo.png"> 
      </a> 
     </div> 
    </div> 
</div>

這種佈局適用於sm和大型設備良好。但是當我試圖在xs設備上運行它（實際上使用Chrome模擬器）時，我的col-md-6佔據了預期的100％的寬度，但它也有1 px的高度。即徽標是可見的，但塊div本身有1 px高度，所以我沒有看到該col-sm-6 DIV的任何背景。我知道問題的根源在於我的徽標上的pull-right類，但不知道如何解決它。

那麼，我在這裏做錯了什麼？
這是一個很好的佈局，在手機上有100％的寬度，在其他屏幕上有50％（居中）？

來源

2017-02-28 MyTitle

使用class=col-xs-12否則根據引導樣式表的div高度爲1px的小設備。否則，你需要設置的div高度分別看到

片段

.fr_bckgrnd { 
 
     background: url("https://static.pexels.com/photos/1526/dark-blur-blurred-gradient.jpg"); 
 
     }

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
     
 
     <style type="text/css"> 
 
     
 

 
    
 
     </style> 
 
     <script type="text/javascript"> 
 
     
 
     </script> 
 
     </head> 
 
     <body> 
 
     
 
     
 
     <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-6 col-sm-offset-3 col-xs-12 fr_bckgrnd" > 
 
      <a href="#" > 
 
       <img class="img-responsive pull-right" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Small_Flag_of_the_United_Nations_ZP.svg/488px-Small_Flag_of_the_United_Nations_ZP.svg.png"> 
 
      </a> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

寬度是100％的開發人員工具使用此代碼檢查之後。

來源

2017-02-28 10:30:09 neophyte

CSS Bootstrap：加入右拉後行數變爲1px的高度

回答

相關問題