html - Bootstrap 水平导航栏不工作。显示为垂直

Question

您好，我在我的主页中使用了 bootstrap 垂直导航栏，现在我想在我的画廊页面中制作水平导航栏。 但新的导航栏也垂直显示。我想为这个页面设置 bootstrap 默认导航栏。 我使用这段代码 segmant 在主页中制作了 vertiacl 导航栏。

 /* make sidebar nav vertical */ 
@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
  }
  .sidebar-nav .navbar ul:not {
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }

现在我想将这些导航栏撤消为水平

谢谢

Answer 1

您应该了解您正在使用的这些属性的作用..

显示: block ；: Quote from W3C

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's content area may shrink due to the floats).

---

float :无；: Quote from Noah Stokes

The float property has four values that we can apply to it: left, right, inherit, and none. Each value is pretty self explanatory. For example, if you assign float: left to an element, it will move to the left-most boundary of its parent element. The same idea applies if you were to assign float: right; to an element. That element would be sent off to the right-most boundary of its parent element. The inherit value tells an element to inherit the float value of its parent element. The value none is the default value and tells an element not to float at all.

float 通常意味着将 block 级元素向左或向右插入，从而操纵与其他 block 元素相关的流。

block 的意思是定义元素的类型和它在页面上所占的空间。默认情况下，大多数 HTML 元素要么是 block 元素，要么是内联元素。显示属性用于操纵这些默认值。 block 元素或使用显示属性操作的元素成为 block 元素将占据其父级的所有水平空间，或者，通常，通常从一行的开头开始到行的结尾结束。

---

将 float:none; 更改为 float:left; 并将 display:block; 更改为 display:inline-block;