Change width property only of nav property in CSS3 and Bootstrap

StackOverflow https://stackoverflow.com/questions/22977728

  •  30-06-2023
  •  | 
  •  

题

I have my HTML file that looks like the follows:

<body>
  <div class="container">
    <header>
      <nav class="nav navbar-default">
      </nav>
    </header>
    //main contents here
  </div>
</body>

So, my HTML has one .container and within it I put .nav as well as main contents.

And I set the following property on CSS3 {width: 99%;} on .container.

However, when I open it up on the browser, not only do the main contents but also nav is narrowed by 1% due to the above setting. What I want to know is, how can I make the container narrowed by 1% but except the nav?

I use Stylus, and I tried to write the following code:

.container
  header
    width: 100%

, but this is not working and the result remains 99% on the window.
I also tried to write &header to refer to the parent .container, but the result was still the same... Why?

有帮助吗？

解决方案

You should do it the other way around, something like..

<nav class="nav navbar-default">
   <div class="container">
      //content
   </div>
</nav>

This way, your <nav> won't be affected by your width change, and all the inner content will be.

If you absolutely need to have it the way you structured it... do something like:

<div class="container">
   <header>
      <nav class="nav navbar-default">
          <div class="container container-width">
             //content
          </div>
       </nav>
   </header>
</div>

.container-width {
   width: 99%;
}

This way, you are not modifying bootstrap grid structure across the board (which can cause you many headaches down the road), and instead you are applying your custom width to your one element (and since it is a class, you can add this same class to any other container to modify that as well.)

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top