Question

我正在Django / Python中使用Bootstrap。我在导航栏中使用相等的宽度时遇到问题。

我已经在菜单中设置了折叠配置。但是我似乎无法在崩溃之前对其项目应用相同的宽度。我希望菜单项的宽度相等，并且位于页面的中央，但它们应位于左侧。

我该如何解决？

HTML：

    <nav class="navbar navbar-expand-sm">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu-collapse">
        <span class="navbar-toggler-icon"></span>
      </button>
        <div class="collapse navbar-collapse" id="menu-collapse">
          <ul class="navbar-nav text-center" aria-expanded>
            <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Contact us</a></li>
          </ul>
        </div>
    </nav>

Answer 1

我建议您使用引导网格系统（见https://getbootstrap.com/docs/4.0/layout/grid/），您可以为每个列表元素指定col-10类和offset-1类。这将使它们的宽度相同，并将它们略微居中在页面中间。

如果您希望它们更小，则还可以给它们设置col-6和3的偏移量。

如果您希望它们为全角，只需给他们col-12类或与col均匀隔开即可。

您还可以使用诸如col-12 col-md-8 offset-md-2之类的类（基于断点/窗口分辨率）使它们具有不同的大小（在移动设备上全宽，在宽度较小时居中，而在较大的显示器上居中。 >

Answer 2

使用以下代码进行响应，

def cuboid(self, x1,y1,z1, x2,y2,z2, tex):
    '''
    Draws a cuboid from x1,y1,z1 to x2,y2,z2 and covers each side with tex\n
    tex format:\n
        (front, back, left, right, top, bottom)
    Facing in the -z direction
    '''
    front  = tex[0]
    back   = tex[1]
    left   = tex[2]
    right  = tex[3]
    top    = tex[4]
    bottom = tex[5]

    tex_coords = ("t2f", (0,0, 1,0, 1,1, 0,1))

    self.batch.add(4, GL_QUADS, right,  ('v3f',(x1,y1,z1, x1,y1,z2, x1,y2,z2, x1,y2,z1)), tex_coords)
    self.batch.add(4, GL_QUADS, left,   ('v3f',(x2,y1,z2, x2,y1,z1, x2,y2,z1, x2,y2,z2)), tex_coords)
    self.batch.add(4, GL_QUADS, bottom, ('v3f',(x1,y1,z1, x2,y1,z1, x2,y1,z2, x1,y1,z2)), tex_coords)
    self.batch.add(4, GL_QUADS, top,    ('v3f',(x1,y2,z2, x2,y2,z2, x2,y2,z1, x1,y2,z1)), tex_coords)
    self.batch.add(4, GL_QUADS, back,   ('v3f',(x2,y1,z1, x1,y1,z1, x1,y2,z1, x2,y2,z1)), tex_coords)
    self.batch.add(4, GL_QUADS, front,  ('v3f',(x1,y1,z2, x2,y1,z2, x2,y2,z2, x1,y2,z2)), tex_coords)

<style>
* {box-sizing: border-box}
body {font-family: Arial, Helvetica, sans-serif;}

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Four links of equal widths */
  text-align: center;
}

.navbar a:hover {
  background-color: #000;
}

.navbar a.active {
  background-color: #4CAF50;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>

Bootstrap-如何在导航栏中使用相等的宽度？

HTML：

2 个答案: