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;
  }

现在我想将这些导航栏撤消到horizantal

日Thnx

Answer 1

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

Display:block;： Quote from W3C

在块格式化上下文中，框从一个包含块的顶部开始一个接一个地垂直排列。两个兄弟框之间的垂直距离由“边距”确定。属性。块格式化上下文中相邻块框之间的垂直边距折叠。

在块格式化上下文中，每个框的左外边缘触摸包含块的左边缘（从右到左格式化，右边缘触摸）。即使在存在浮子的情况下也是如此（尽管盒子的内容区域可能由于浮子而收缩）。

Float:none;： Quote from Noah Stokes

float属性有四个值可以应用于它：left，right，inherit和none。每个值都非常自我解释。例如，如果将float：left分配给元素，它将移动到其父元素的最左边界。如果您要分配float：right，则适用相同的想法;一个元素。该元素将被发送到其父元素的最右边界。 inherit值告诉元素继承其父元素的float值。值none是默认值，并告诉元素根本不浮动。

浮动通常意味着将块级元素向左或向右推动，相对于其他块元素操纵流。

块意味着定义元素的类型以及它在页面上占用的空间。默认情况下，大多数HTML元素要么是块元素，要么是内联元素。显示属性用于处理这些默认值。块元素或用显示属性操作的块元素将占用它的父级的所有水平空间，或者，通常，通常从一行的开头开始并在结束时结束。线。

将您的float:none;更改为float:left;，将display:block;更改为display:inline-block;

bootstrap水平导航栏无法正常工作。显得垂直

1 个答案: