Question

我是HTML / CSS新手，我正在创建一个顶部有响应式导航栏的网页。我面临的问题是，当navbar折叠并按下按钮时，navbar-items正在对齐打开的导航菜单的左侧。我希望将项目对齐到菜单中心。我在SO和W3schools上进行了大量搜索，但我无法解决问题。

这是我正在使用的HTML代码：

<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="CSS/stylesheet.css">
  <title>
    My Personal Portfolio
  </title>
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><strong>Vatsal Sura</strong></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav nav-pills navbar-nav navbar-right">
          <li class="nav-item active"><a class="nav-link" href="#">ABOUT</a></li>
          <li class="nav-item "><a class="nav-link" href="#">MY PORTFOLIO</a></li>
          <li class="nav-item"><a class="nav-link" href="#">CONTACT ME</a></li>
        </ul>
      </div>
    </div>
  </nav>
</body>
</html>

以下是首次在大屏幕上加载时网页的图片：

当浏览器最小化并且导航栏折叠时，这是另一张图像：

单击按钮时，导航栏将在原始导航栏下方打开，项目与左侧对齐，但我希望它们与导航栏的中心对齐。

P.S。：我希望nav-items在未折叠时首先右对齐，但我希望它们在折叠时居中对齐。任何帮助，将不胜感激。谢谢。

Answer 1

您可以尝试添加以下CSS：

.navbar-collapse.collapse.in ul{ 
  text-align: center;
}

取消折叠导航时，引导程序会添加.in类。此外，请确保li或inline显示inline-block。

编辑1：我想，因为navbar-right

中的ul类

.navbar-collapse.collapse.in ul.nav{ 
  text-align: center !important; // Try to remove the important part.
}

您是否也可以检查开发人员工具以检查类是否正确以及样式是否过度？

编辑2：

将此添加到您的CSS：

.navbar-collapse.collapse.in ul{
  text-align: center;
  vertical-align: middle;
}
.nav-pills>li {
  float: none;
  display: inline-block;
}

Answer 2

如果您想让您的网站完全响应，那么您应该为不同的屏幕尺寸编写不同的CSS规则......

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */

@media only screen and (min-width : 321px) {
/* Styles */
}


/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* Desktops and laptops ----------- */

@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

有关详细信息，请参阅此问题：CSS media queries for screen sizes

中心在缩小屏幕尺寸并按下按钮后对齐导航栏

2 个答案: