Html 使推特引导程序单元不稳定

我正在做一个新项目，它主要基于Twitter引导。问题是，我已经尝试了好几天，想弄明白如何让细胞（从网格中）不堆叠在小分辨率上。 相反，我希望单元格的内容能够自行调整大小，因此所有内容都保存在一行中

我使用.col-md-3和.col-md-6类，下面是我的代码：

<header>
    <section id="left" class="col-md-3">
        <i class="fa fa-circle greendot"></i>
        <span>ALARM: OK</span>
        <br/>
        <i class="fa fa-circle orangedot"></i>
        <span>DETECTION: SENSORS ISSUE</span>
        <p id="logintext">
            <?php

                if(empty($_SESSION['user']))
                {
                    echo('NOT LOGGED IN /// <a href="index.php">LOG IN</a>');
                }
                else {
                    $uppercaseusername = strtoupper(htmlentities($_SESSION['user']['username']));
                    echo('WELCOME ' . $uppercaseusername . ' /// <a href="logout.php">LOG OUT</a>');
                }
            ?>
        </p>
    </section>
    <section id="banner" class="col-md-6">
        <img src="banner.png" alt="FireGuard Main Banner" id="headerlogo" />
    </section>
    <section id="right" class="col-md-3">
        <h3 id="time"></h3>
    </section>      
</header>

警报：好的


检测：传感器问题

我希望你明白我的问题是什么，如果需要，我可以提供截图

---

提前多谢；）

好的，我想你在问这个问题之前需要仔细阅读文档，但让我给你总结一下

Bootstrap 3+有三个不同的网格，分别是小型（sm）-中型（md）-大型（lg），每个网格采用移动优先的方法，针对不同的屏幕大小

我会给你一个解决方案，但要真正理解框架的机制，请花点时间好好阅读

将所有的（md）更改为（sm），这应该适合您，例如：col-md-3=>col-sm-3