为什么我的导航按钮在列表中排列不正确

由于某种原因，每当我的网页在一定大小内时，导航栏中的单词就会移动到不同的位置，我不知道为什么。

要了解我在说什么，请查看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;
}

您关心该网站的移动版本吗？如果你没有，我有你正在寻找的东西：

尝试更改：

<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;
}

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

问题是您没有附加引导程序，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示例。

编辑：

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

   <!DOCTYPE html>
    <html>
      <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <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>

相关内容

最新更新

热门标签：