Question

您好，我想问一下我该如何居中，这些内容：主页，论坛，统计信息等。我尝试了许多功能，但是没有一个对我有用。第二个问题是背景边框按钮，当我指向文本时，按钮文本将向右移动。 screen 感谢您的一些建议。

class RealSet;

class IntSet {
public:
    ToRealSet(RealSet*);

    friend class RealSet;
};

class RealSet {
public:
    ToIntSet(IntSet*);

    friend class IntSet;
};

.navbar-default {
  background-color: rgb(48, 48, 48);
}

.navbar-nav {
  font-size: 20px
}

.custom-toggler {
  border-color: white;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='-9 0 35 33' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-tabs>li>a:hover {
  background-color: purple !important;
  border: medium none;
  border-radius: 0;
  color: #fff;
}

.nav-item {
  color: white;
  font-size: 22px;
  display: block;
}

.nav-item:hover {
  border-radius: 12px;
  background: rgb(80, 80, 80);
  padding: 5px;
  width: 100px;
  height: 50px;
}

Answer 1

为了使导航项居中，请使用mx-auto类将它们居中对齐。在新选项卡中查看输出打开结果（全屏）
我也覆盖了.navbar-nav的引导程序类

.navbar-nav {
  font-size: 20px;
  width:75% !important;
  display:flex !important;
  justify-content:space-evenly !important;
  align-items:center !important;
}

.navbar-default {
  background-color: rgb(48, 48, 48);
}

.navbar-nav {
  font-size: 20px;
  width:75% !important;
  display:flex !important;
  justify-content:space-evenly !important;
  align-items:center !important;
}


.custom-toggler {
  border-color: white;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='-9 0 35 33' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-tabs>li>a:hover {
  background-color: purple !important;
  border: medium none;
  border-radius: 0;
  color: #fff;
}

.nav-item {
  color: white;
  font-size: 22px;
  display: block;
}

.nav-item:hover {
  border-radius: 12px;
  background: rgb(80, 80, 80);
  padding: 5px;
  width: 100px;
  height: 50px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-default navbar-custom ">
  <a class="navbar-brand" href="http://nextron.fakaheda.eu">
    <img src="http://nextron.fakaheda.eu/img/nextron.png" alt="Nextron Logo" width="155" height="43">
  </a>
  <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <ul class="nav navbar-nav mx-auto">
      <li class="text"><a class="nav-item nav-link" style="color:white" href="#">Home</a></li>
      <li class="text"><a class="nav-item nav-link" style="color:white" href="#">Forum</a></li>
      <li class="text"><a class="nav-item nav-link" style="color:white" href="#">Banlist</a></li>
      <li class="text"><a class="nav-item nav-link" style="color:white" href="#">Servers</a></li>
      <li class="text"><a class="nav-item nav-link" style="color:white" href="#">Statistics</a></li>
      <li class="text"><a class="nav-item nav-link" style="color:white" href="#">VIP</a></li>
    </ul>
  </div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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>

Boostrap Center导航项目

1 个答案: