Question

我想在导航栏中有一个按钮：

与其他导航栏项内联（即不会被推到下一行）;
位于折叠的导航栏部分之外;和
始终位于页面中央以获取所有屏幕分辨率（包括折叠导航栏右侧时）。

我遇到了特殊问题：

按钮居中;和
某些导航栏项目不适用于较小的屏幕分辨率（当导航栏折叠时）。

以下是我的代码。

我尝试过的替代CSS：

.navbar-button {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

但是这导致其他一些导航栏链接不起作用。我随后尝试使用z-index，但似乎没有用。

body {
  padding-top: 50px;
  padding-bottom: 20px;
}
.section {
  margin-bottom: 30cm;
}
.navbar-button {
  display: inline-block;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>Test</title>

  <!-- Bootstrap Core CSS -->
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#brand">Brand</a>
        <div class="navbar-button">
          <button type="button" class="btn btn-primary navbar-btn">Button</button>
        </div>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li class="text-center">
            <a href="#link1">Link-1</a>
          </li>
          <li class="text-center">
            <a href="#link2">Link-2</a>
          </li>
          <li class="text-center">
            <a href="#link3">Link-3</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="section" id="brand">
        <h3>Top</h3>
      </div>
    </div>
    <div class="row">
      <div class="section" id="link1">
        <h3>Section-1</h3>
      </div>
    </div>
    <div class="row">
      <div class="section" id="link2">
        <h3>Section-2</h3>
      </div>
    </div>
    <div class="row">
      <div class="section" id="link3">
        <h3>Section-3</h3>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

您可以使用position：absolute但不要应用100％宽度，因为它很可能覆盖您的链接/切换按钮。您也可以将.navbar-btn直接应用于外部div中的按钮。

CSS示例：

.button-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

工作示例：

＆＃13;

body {
  padding-top: 50px;
  padding-bottom: 20px;
}
.section {
  margin-bottom: 30cm;
}
.button-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="https://www.github.com" target="_blank">Brand</a>
      <button type="button" class="btn btn-primary navbar-btn button-center">Button</button>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="text-center">
          <a href="https://www.github.com" target="_blank">Test Link</a>
        </li>
        <li class="text-center">
          <a href="#link2">Link-2</a>
        </li>
        <li class="text-center">
          <a href="#link3">Link-3</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="section" id="brand">
      <h3>Top</h3>
    </div>
  </div>
  <div class="row">
    <div class="section" id="link1">
      <h3>Section-1</h3>
    </div>
  </div>
  <div class="row">
    <div class="section" id="link2">
      <h3>Section-2</h3>
    </div>
  </div>
  <div class="row">
    <div class="section" id="link3">
      <h3>Section-3</h3>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

＆＃13;

Bootstrap导航栏中的中心按钮（外部折叠）

1 个答案: