Question

我希望网格居中并占据sm，md和lg设备的一半屏幕，并在xs设备上全屏显示。所以我有这个布局：

<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像素。即徽标是可见的，但块div本身的高度为1像素，因此我看不到col-sm-6 DIV的任何背景。我知道问题的根源是pull-right我的徽标上的类，但不知道如何解决它。

那么，我在这里做错了什么？
在手机上宽度为100％，在其他屏幕上宽度为50％（居中）是不是很好？

Answer 1

使用class=col-xs-12否则根据bootstrap样式表，对于小型设备，div高度为1px。否则你需要分别设置div的高度，参见

<强>段

＆＃13;

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

＆＃13;

<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>

＆＃13;

在开发人员工具中使用此代码后，宽度为100％。

CSS Bootstrap：添加pull-right后行的高度变为1px

1 个答案: