Div 在导航栏中 Bootstrap 打破中心

Question

我有一个导航栏，它与这段代码完美居中：

        <nav class="navbar navbar-light bg-light text-primary navbar-personalized w-100 justify-content-center navbar-personalized">
        <div class="row">
            <a class="navbar-brand">
                My WebSite
            </a>
        </div>
    </nav>

现在我想添加一个 div 里面是可点击的 :

   <nav class="navbar navbar-light bg-light text-primary w-100 justify-content-center navbar-personalized">
      <div class="row">
        <a class="navbar-brand">
          My Web Site
        </a>

          <div id="messageAdministrateur" onclick="alert('This is an alert')" style="color:red;text-align: center;width: 100%;">
          <b>WARNING, NEW MESSAGE<br>CLICK</b>
          </div>
            </div>
    </nav>

我想将两者居中，但只有 WARNING, NEW MESSAGE CLICK 居中，而不是 My Web Site。如何使两者居中？这是一个工作示例： https://jsfiddle.net/g2ea36rn/

Answer 1

您需要在行之后创建列。因此，只需为每个 div 添加一个 col-12 并将文本样式居中。

<div class="row">
   <div class="col-12">
      <a class="navbar-brand">
  My Web Site
</a>

  <div id="messageAdministrateur" onclick="alert('This is an alert')" style="color:red;text-align: center;width: 100%;">
  <center><b>WARNING, NEWdd MESSAGE</b></center><b><center>CLICK</b></center>
  </div>
     </div>
    </div>


.navbar-personalized{
  position: absolute !important;
  top: 0;
  left: 0px;
}

.row {
  text-align: center;
}

Answer 2

您只需在 nav 之后的 div 添加以下样式。在这里你可以使用 flex 来证明你的内容到中心。并将其置于屏幕中央，将 width 设置为 100%

style="display:flex; justify-content:center; width:100%"

.navbar - personalized {
  position: absolute!important;
  top: 0;
  left: 0 px;
}

<!doctype html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="My WebSite">
  <link rel="icon" href="ressources/favicon.ico" />
  <title>My WebSite</title>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="ressources/style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
  <style>

  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid">
    <div >
      <nav class="navbar navbar-light bg-light text-primary w-100  navbar-personalized">
        <div class="row" style="display:flex; justify-content:center; width:100%">
          <a class="navbar-brand">
              My Web Site
            </a>

          <div id="messageAdministrateur" onclick="alert('This is an alert')" style="color:red;text-align: center;width: 100%;">
            <center><b>WARNING, NEW MESSAGE</b></center><b>
                <center>CLICK
              </b></center>
          </div>
        </div>
      </nav>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ex dolor, malesuada vitae semper a, imperdiet eu sapien. Aenean volutpat congue mi, eu consequat nisl maximus nec. Suspendisse pharetra suscipit lorem a iaculis. Duis efficitur libero vitae purus
        interdum viverra quis nec est. Ut et ante et justo posuere hendrerit. Ut eu mauris at mi egestas rhoncus non vitae magna. Etiam a vehicula nisl, vel convallis lacus. Sed at urna sit amet enim tempor condimentum. Orci varius natoque penatibus et
        magnis dis parturient montes, nascetur ridiculus mus.
      </p>
    </div>
  </div>
</body>

</html>

Div 在导航栏中 Bootstrap 打破中心

Div in navbar Bootstrap break the center

html

css

center

twitter-bootstrap