文章/答案/技术大牛

发布

问跟鞋带对齐了吗？
EN

Stack Overflow用户

提问于 2015-10-26 03:37:24

回答 1查看 507关注 0票数 0

我有一个基本的布局，我正在努力实现。我有一个.container类，它的徽标漂浮在左边，然后我想要一个引导带导航条在右边和容器顶部浮动，它似乎与带引导带的" navbar -nav“类的”拉-右“类一起正确浮动，但是它在品牌徽标下面，我无法为我的生活弄清楚为什么或者如何使它正确地对齐。

无论如何，这是html..。

<html lang= "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
    <div class= "container">
        <header class = "headerWrap">
            <div class = "row">
                <div class ="brand"></div>
                    <div class = " userNav col-sm-8 col-sm-offset-4">
                        <nav class = "navbar navbar-default">
                            <ul class= "nav navbar-nav pull-right">
                                <li><a href= "#">Home</a></li>
                                <li><a href= "#">Contact Us</a></li>
                                <li><a href= "#">Sign In</a></li>
                                <li><a href= "#">Cart</a></li>
                                <li><a href= "#">Location + Directions</a></li>
                                <li><a href= "#">Who We Are</a></li>
                                <li><a href= "#">Alumni Network</a></li>    
                            </ul>
                        </nav>
                    </div>
            </div>

        </header>

    </div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body>
</html>

下面是CSS：

$font-color: white;

body {
    background-color: black;
}

.headerWrap {
    width: 100%;
    height: 250px;
}

.brand {
    background-image:url(img/Screen%20Shot%202015-10-25%20at%2010.13.40%20PM.png);
    background-size: 100%;
    float: left;
    background-repeat: no-repeat;
    width: 250px;
    height: 100px;
}

.userNav {
    float: right;
}

.navbar-default {
    background-color: transparent;
    border: none;
}

.navbar-default .navbar-nav>li>a{
    color: $font-color;
}

我遗漏了什么？

alignment

navbar

nav

css

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-10-26 04:03:22

这仅仅是因为您将col-sm-offset-4类添加到userNav元素中。移除它，一切都会像预期的那样工作。当您保持col-sm-offset-4类时，它处理的是element完全需要12网格。由于它已经被brand - logo移动了4个网格，而且框架不能在同一个row中分配12网格，所以它将其移动到新的row。所以不需要再给offset。只需将元素的类更改如下：

<div class ="userNav col-sm-8"> <!--remove col-sm-offset-4 from here-->

给你一个演示

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33338104

复制

相似问题

问跟鞋带对齐了吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问跟鞋带对齐了吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问跟鞋带对齐了吗？
EN