Question

我是一个引导3新手，所以请温柔地对待我:)我知道我完全走错了路线。我尝试了几种方法，这只是最新的方法。我已经搜索过bootstrap 3网站做同样的事情，所以我可以向他们学习，但可以找到任何（有些相似），但没有大徽标）

我想要的只是左侧的一个大标志占据我的标题的全高（约100px）然后小菜单右上角联系我们|博客|应用和标题空间的主菜单中心底部（但不在徽标下面）从它旁边开始（理想情况下居中），有5个菜单选项。我试图添加一张图片，但它不会让我。

继续我拥有的东西：`

    <style>
            .smallmenu {
            color: white;
            background-color: #003300;
            padding-right: 20px;
            float: right;
            font-size: 12px;
            line-height: 50px;

        }

        .mainmenu {
            background-color: #0000cc;
            color: white;
            padding-left: 200px;
            float: right;
            line-height: 30px;
            font-size: 16px;
        }

        .logo {
            background-color: #f11f18;
        }
    </style>


</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 logo">
            <img src="img/logo_en2.png" alt="logo">
        </div>
        <div class="smallmenu">
            <ul class="list-inline">
                <li> Contact Us</li>
                <li> Apply Now</li>
                <li> Blog</li>
            </ul>
        </div>

        <div class="col-lg-10 mainmenu">
            <ul class="list-inline">
                <li>Menu 1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
                <li>Menu 5</li>
            </ul>
        </div>
    </div>
</div>

` 彩色背景只是为了帮助我了解事情的发展方向。当然，一旦我调整它，它就会崩溃。如果有人能指出我正确的方向..结构应该如何......我应该使用导航栏吗？我应该在标题中使用col-xx-xx吗？它只是一行，还是应该是2？

我想在手机上它应该有徽标和小顶级菜单，主菜单应该堆叠。

非常感谢任何有关结构，网站查看的帮助或我可以学习的代码示例。

由于

Answer 1

我要给出的第一点建议是从广泛的布局开始 - 屏幕上的所有东西都要去 - 在你开始尝试设置菜单等之前，因为你永远不知道什么时候继承会破坏东西。

this (fiddle)基本上是你要找的东西吗？

关键概念是：

<div class="row">
    <div class="col"></div>
    <div class="col">
        <div class="row"></div>
        <div class="row"></div>
    </div>
</div>

Bootstrap 3两个带大徽标的菜单标题

1 个答案: