Question

目前我的下拉列表有效，但当它下拉时，菜单项位于左上角网站标题的顶部。我怎样才能将它们推到它所说的位置？＃34; Tech Site＆＃34;所以他们并没有像这张图片那样被压扁。

虽然我无法在jsfiddle中获得实际的下拉列表，但这是一个小问题。 https://jsfiddle.net/uc83z5zb/1/

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 3</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/reset.css">


    </head>
    <body>

        <div class = "navbar navbar-inverse navbar-static-top">
            <div class = "container">
                      <a href = "#" class = "navbar-brand">Tech Site</a>


                <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                </button>

                <div class = "collapse navbar-collapse navHeaderCollapse">

                    <ul class = "nav navbar-nav">

                            <li><a href = "#">Specs and Features</a></li>
                        <li><a href = "#">How To Videos</a></li>


                            <li class = "dropdown">

                            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media <b class = "caret"></b></a>
                            <ul class = "dropdown-menu ">
                                <li><a href = "#">Twitter</a></li>
                                <li><a href = "#">Facebook</a></li>
                                <li><a href = "#">Google+</a></li>
                                <li><a href = "#">Instagram</a></li>
                            </ul>

                        </li>
                        <li><button id="buyButton" type="button" class="btn btn-primary">Buy Now</button></li>

                    </ul>

                </div>

            </div>
        </div>





        <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


    </body>
</html>


#buyButton {
    position:relative;
    top:7.5px;

    }

CSS

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;

    }

    .navbar .navbar-collapse {
        text-align: center;


    }

.navbar-brand{
    position:relative;
    left:224 px;    
    }
    .nav navbar-nav{
        margin-top:100px;
        }
}

Answer 1

您在navbar-header之后错过了.container课程。请参阅Docs。

＆＃13;

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  .navbar .navbar-collapse {
    text-align: center;
  }
}
@media (max-width: 767px) {
  #buyButton {
    margin-left: 15px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Tech Site</a>
    </div>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Specs and Features</a>
        </li>
        <li><a href="#">How To Videos</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class = "caret"></b></a>
          <ul class="dropdown-menu ">
            <li><a href="#">Twitter</a>
            </li>
            <li><a href="#">Facebook</a>
            </li>
            <li><a href="#">Google+</a>
            </li>
            <li><a href="#">Instagram</a>
            </li>
          </ul>
        </li>
        <li>
          <button id="buyButton" type="button" class="btn btn-primary navbar-btn">Buy Now</button>
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

下拉菜单项目在标题旁边而不是在标题下面

1 个答案: