Question

出于某种原因，只要我的网页在一定的大小范围内，导航栏中的文字会移动到其他位置，我不知道为什么。

要了解我在说什么，请查看我的代码on jsFiddle。将结果窗口一直拉伸到左侧，然后观看li按钮。

HTML：

<head>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
</head>

<header class="row">
        <a name="home"></a>
        <div class="container">
            <figure class="col-lg-12"><a href="index.html"><img src="assets/karate-kick.png" height="100" width="400" alt="karate kick"></a></figure>
            <nav>
                <ul class="col-lg-7">
                    <li class="col-md-2"><a href="#about">About</a></li>
                    <li class="col-md-2"><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

CSS：

nav ul.col-lg-7 {
    text-decoration:none;
    float:right;
    position: relative;
}

nav ul li.col-md-2 {
    list-style-type: none;
    font-size: 2rem;
    background-color: white;
    color:black;
    border: 3px outset lightgray;
    margin: 8rem 0 1rem 1rem;
    float:left;
    bottom: 5rem;
    border-radius: 25px;    
    text-align: center;
    box-shadow: 100px black;
    padding: 0 5rem;
}

nav ul li.col-md-2:active {
    border: 3px inset lightgrey;
    position: relative;
}

nav ul li.col-md-2:hover {
    background-color:yellow;
}

header div.container {
    background-color: red;
}
div figure {
    top: 6rem;
}

Answer 1

您关心网站的移动版本吗？如果你不这样做，我就有你想要的东西：

尝试更改此内容：

<li class="col-md-2"><a href="#about">About</a></li>
<li class="col-md-2"><a href="#contact">Contact</a></li>

对此：

<li class="col-md-2"><a href="#about" class="navLinks1">About</a></li>
<li class="col-md-2"><a href="#contact" class="navLinks2">Contact</a></li>

然后将其添加到CSS的顶部：

.navLinks{
  position:relative;
  right:28px;
}

.navLinks2{
  position:relative;
  right:33px;
}

这样可以使文本正确居中，但在移动网站上却没有那么多。

Answer 2

问题是你还没有附上你的引导程序，jQuery CDN正确地将这些CDN附加到你的<head>标签上。这就是为什么这些按钮搞砸了

<head>      
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

这是CODEPEN示例。

修改

如果这些Bootstrap文件位于本地。然后尝试添加以下结构，因为看起来你还没有正确添加jQuery引用。

<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <header class="row"> <a name="home"></a> <div class="container"> <figure class="col-lg-12"><a href="index.html"><img src="assets/karate-kick.png" height="100" width="400" alt="karate kick"></a></figure> <nav> <ul class="col-lg-7"> <li class="col-md-2"><a href="#about">About</a></li> <li class="col-md-2"><a href="#contact">Contact</a></li> </ul> </nav> </div> </header> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

为什么导航按钮在列表中错误对齐？

2 个答案: