Question

我正在尝试在我的网站上执行响应式导航栏。我想在导航栏的左边有一个小img，然后我想有两行文本 - 一个在另一个下面，接下来是我的img。我的cols有一个问题。当屏幕介于750到950 pc之间时，我的文字就出现了问题，而且我认为他们当时没有这些cols，怎么纠正这个？

<nav class="navbar navbar-default">
<div class="container-fluid col-md-12">
    <div class="navbar-header">
        <div class=" col-sm-2" style="float: left">
            <img alt="Brand" src="buty2.png">
        </div>
        <div class="col-sm-10">
            <div class="navbar-text">Some text</div>
            <div class="navbar-text">Some text under first text</div>

        </div>
    </div>
</div>
</div>
</nav>

Answer 1

所以，首先，你需要使用＆＃34;行＆＃34;类和在该嵌套中的一个div与类col-sm-2和另一个div与col-sm-10。如果你想在左边有一个图像，那么将该图像嵌套在一个带右拉类的范围内，另一个跨度或div旁边的那个带有span / div的类左拉。

行 -col2 --div.pull右 --div.pull左 -col10

那是你在寻找什么？此外，您可以将列用于不同的媒体查询，例如为较小的分辨率执行较小的列等等。

Answer 2

您必须将第一个col-md-12的{{1}}替换为div才能开始排。

但我认为row和navbar-right或navbar-left正是您所寻找的。

看到这个： Bootstrap Navbar Components

如果你真的想使用网格系统，请仔细阅读。 Bootstrap Grid System

在这种情况下，我的最爱将是navbar方法。试试吧;）

Bootstrap - 如何使用cols？

2 个答案: