Question

我已经使用 HTML 和 CSS 下面的 Bootstrap 创建了一个菜单，我想创建全角居中菜单，下面的代码是显示添加第5个菜单项时它坏了，它与4个菜单项配合得很好。

HTML：

my_data <- data.frame(Concentration = seq(0,55,5), 
                           OD600_avg = c(0.8, 0.17, 0.15, 0.14, 0.137, 0.12, 0.11, 0.09, 0.08, 0.08, 0.08, 0.08),
                          OD600_sdv = c(0.05, 0.004, 0.002, 0.005, 0.008, 0.005, 0.007, 0.02, 0.011, 0.02, 0.004, 0.004))

ggplot(my_data, aes(x = Concentration, y = OD600_avg)) +
  geom_area(colour = "black", fill = "blue", alpha = 0.2) +
  geom_ribbon(aes(x = Concentration, ymin = OD600_avg - OD600_sdv, ymax = OD600_avg + OD600_sdv), fill = "firebrick", alpha = 0.4) +
  geom_line(colour = "red", size = 1, aes(x = Concentration, y = OD600_avg, group = 1))

CSS：

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
    </div>
    <ul class="nav navbar-nav" style="width:100%;">
        <li id="set_width" class="active"><a href="#">Home</a></li>
        <li id="set_width"><a href="#">Page 1</a></li>
        <li id="set_width"><a href="#">Page 2</a></li>
        <li id="set_width"><a href="#">Page 3</a></li>
        <li id="set_width"><a href="#">Page 4</a></li>
    </ul>
</nav>

就我而言，菜单是动态的，为此最好的CSS是什么？

Answer 1

这是完整的解决方案，您可以添加任意数量的内容，它不会损坏：-）

#set_width {
  width: 100%;
  text-align: center;
  display: inline-block;
}
ul.navbar-nav{
	width:100%; 
	display: flex;
  padding:0px;
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
  </div>
  <ul class="nav navbar-nav">
    <li id="set_width" class="active"><a href="#">Home</a></li>
    <li id="set_width"><a href="#">Page 1</a></li>
    <li id="set_width"><a href="#">Page 2</a></li>
    <li id="set_width"><a href="#">Page 3</a></li>
    <li id="set_width"><a href="#">Page 4</a></li>
     <li id="set_width"><a href="#">Page 5</a></li>
  </ul>
</nav>

Answer 2

首先，您需要将id = "set_width"更改为class = "set_width"，因为id是唯一的标识符，并且页面上应该只有一个。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
  </div>
  <ul class="nav navbar-nav">
    <li class="set_width" class="active"><a href="#">Home</a></li>
    <li class="set_width"><a href="#">Page 1</a></li>
    <li class="set_width"><a href="#">Page 2</a></li>
    <li class="set_width"><a href="#">Page 3</a></li>
    <li class="set_width"><a href="#">Page 4</a></li>
     <li class="set_width"><a href="#">Page 5</a></li>
  </ul>
</nav>

然后，您可以将flex用于您的任务，例如：

.navbar-nav {
   display: flex;  
   justify-content: space-around;
}

全宽居中菜单引导程序

2 个答案: