Question

我是响应式设计的新手，我正在尝试使用bootstrap。

我的问题是，在小屏幕上，我无法在单行上显示部分html。

我有以下HTML：

    <!DOCTYPE HTML>
<html>
<head lang="en">
    <title>Test</title>
    <meta content="IE=11.0000" http-equiv="X-UA-Compatible">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-width=1.0">
    <link href="files/bootstrap.css" rel="stylesheet">
    <link href="files/bootstrap-responsive.css" rel="stylesheet">
    <style>
        body, html
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container-fluid
        {
            display: table !important;
            height: 100% !important;
            width: 100%;
        }
        .row-fluid
        {
            display: table-row !important;
            height: 100% !important;
            width: 100%;
        }
        .fullwidth
        {
            width: 100% !important;
        }

        @media screen and (min-width: 750px)
        {

            .top-bar-items
            {
                display: table !important;
                height: 80px;
            }
        }


        .content
        {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .navbar-cell
        {
            padding-top: 18px;
        }

        .blue
        {
            background-color: Blue;
        }
        .red
        {
            background-color: red;
        }
        .green
        {
            background-color: green;
        }

    </style>
</head>
<body>
    <header> 
     <div class="container-fluid">
        <div class="row-fluid">
            <div class="col-md-5 col-sm-7 text-left">
                <a href="#"><img src="images/logo.png" /></a> 
            </div> 
            <div class="col-md-2 col-sm-5 red top-bar-items">
                   <div class="content">
                      <div class="row-fluid">
                           <div class="col-md-9 green col-sm-7 col-xm-6">            
                                <a href="#"><img src="images/linkedin.png" /></a>
                                <a href="#"><img src="images/linkedin.png" /></a>
                                <a href="#"><img src="images/linkedin.png" /></a>                            
                            </div>
                            <div class="col-md-3 blue col-sm-5 col-xm-6">            
                                <a href="#"><img src="images/default.png" /></a> 
                                <a href="#"><img src="images/default.png" /></a>                          
                            </div> 
                       </div>  
                   </div>  
            </div>
            <div class="col-md-5 text-center visible-desktop">                
                <div style="padding-top:20px;">
                    <a href="#"><img src="images/header.png" /></a>                
                </div>
            </div>
        </div>
         <div class="row-fluid">
            <div class="col-md-6 blue"> 
            Something2
            </div>
            <div class="col-md-6 red">
               Something2
            </div>
        </div>
     </div> 
    </header>
    <script src="files/jquery.min.js"></script>
    <script src="files/bootstrap.js"></script>
</body>
</html>

我指的html代码如下：

<div class="col-md-2 col-sm-5 red top-bar-items">
                   <div class="content">
                      <div class="row-fluid">
                           <div class="col-md-9 green col-sm-7 col-xm-6">            
                                <a href="#"><img src="images/linkedin.png" /></a>
                                <a href="#"><img src="images/linkedin.png" /></a>
                                <a href="#"><img src="images/linkedin.png" /></a>                            
                            </div>
                            <div class="col-md-3 blue col-sm-5 col-xm-6">            
                                <a href="#"><img src="images/default.png" /></a> 
                                <a href="#"><img src="images/default.png" /></a>                          
                            </div> 
                       </div>  
                   </div>  
            </div>

当中型和大型屏幕显示在一行中但在小屏幕上显示时会分成两行，这就是问题所在。

提前致谢。

Answer 1

作为AntB pointed out，这只是意外使用col-xm-6而不是col-xs-6的情况。

当为任何屏幕屏幕尺寸应用列大小时，除非另有说明，否则除此之外的所有尺寸都会自动给出12列的宽度。在这种情况下，类col-xm-6没有达到任何规则，所以它不会告诉bootstrap任何东西。当给定的row中有超过12列的元素时，它们只会换行到下一行，所以你的两个小的12列宽度div只包含在两行中。

将其更改为：

<div class="content">
    <div class="row-fluid">
        <div class="col-md-9 green col-sm-7 col-xs-6">
            <!-- content -->
        </div>
        <div class="col-md-3 blue col-sm-5 col-xs-6">
            <!-- content -->
        </div>
    </div>
</div>

小屏幕设计分为两排

1 个答案:

Demo in fiddle