引导水平导航栏不起作用。 显示为垂直

Question

hi i used bootstrap vertical navbar in my home page and now i want to make horizantal navbar in my gallery page. but new navbar also displaying vertically. i want to make bootstrap default navbar for this page. i used this code segmant to make vertiacl navbar in home page.

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

now i want to undo these navbar to horizantal

thnx

Answer 1

You should learn what these properties you are using do..

Display: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:none; : 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.

Floating means, very generally, to push a block-level element to the left or to the right, manipulating the flow in relation to other block elements.

Block means to define the type of element and the space it takes up on the page. The majority of HTML elements are either going to be block or inline elements by default. The display properties is used to manipulate these defaults. Block elements, or elements manipulated with the display properties to be block elements will take up all of the horizontal space of it's parent, or, very generally, often begin at the beginning of a line and end at the end of the line.

---

Change your float:none; to float:left; and display:block; to display:inline-block;