Html 小屏幕设计分为两行_Html_Twitter Bootstrap

Html 小屏幕设计分为两行

html twitter-bootstrap

Html 小屏幕设计分为两行,html,twitter-bootstrap,Html,Twitter 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

我是新的响应设计，我试图使用引导

我的问题是，当在小屏幕上时，我无法让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
{
身高：100%；
保证金：0；
填充：0；
}
.容器液体
{
显示：表！重要；
身高：100%！重要；
宽度：100%；
}
.世界其他地区
{
显示：表格行！重要；
身高：100%！重要；
宽度：100%；
}
.全宽
{
宽度：100%！重要；
}
@媒体屏幕和屏幕（最小宽度：750px）
{
.顶栏项目
{
显示：表！重要；
高度：80px；
}
}
.内容
{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
.导航条单元
{
填充顶部：18px；
}
蓝色
{
背景颜色：蓝色；
}
红色
{
背景色：红色；
}
绿色
{
背景颜色：绿色；
}
什么
什么

我指的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>

当在中屏幕和大屏幕上显示为一行时，这是一个问题，但当在小屏幕上显示时，它会分成两行

提前感谢。

正如，这只是意外使用

col-xm-6

而不是

col-xs-6

的情况

当一个列大小应用于任何屏幕大小时，除非另有规定，否则它下面的所有大小都会自动指定12列的宽度。在本例中，类

col-xm-6

不符合任何规则，因此不会告诉引导程序任何信息。当给定的

行中有超过12列的元素时，它们只会换行到下一行，因此两个12列宽的小div只会换行到两行
将其更改为：


这就是我们使用响应式设计的原因。什么是col-xm-6？那不是X-6列吗？谢谢！我还可以问一下，为什么列大小没有得到100%的宽度，因为我在.row中指定了它？现在，当您在小屏幕中看到页面时，3个图标会被包装成2行，因为两列div不会拉伸以填充可用空间。这是因为display:table row使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>