如何在窗口调整大小时保持导航栏不移动

I am new to html/css. My problem is when I re-size my browser window the text of the nav-bar shifts/condenses according to the size of the window and becomes distorted. I would like it to remain static so that when I narrow my browser window I would have to have to scroll over to the right to be able to see the text again. I'm using bootstrap as well.

我是html / css的新手。我的问题是当我重新调整我的浏览器窗口大小时,导航栏的文本根据窗口的大小移动/缩小并变得扭曲。我希望它保持静态,这样当我缩小浏览器窗口时,我必须向右滚动才能再次看到文本。我也在使用bootstrap。

This is my code:

这是我的代码:

HTML

<body>
  <div class="nav">
    <div class="container">
      <ul class="pull-right">
        <li><a href="#">HOME</a></li>
        <li><a href="#">WINES</a></li>
        <li><a href="#">GRAPES</a></li>
        <li><a href="#">ABOUT US</a></li>
      </ul>
    </div>
  </div>
</body>

CSS

.nav li {
  display: inline;
}

.nav a {
  color: #5a5a5a;
  font-size: 20px;
  font-weight: bold;
  padding: 14px 10px;
}

.nav {
  position: absolute;
  top: 20px;
  right: 0px;
}

I tried using .container {width: 900px;} but that didn't help. The nav bar still doesn't stay static.

我尝试使用.container {width:900px;}但这没有帮助。导航栏仍然不会保持静态。

3 个解决方案

#1

You can solve this by adding a min-width to the navbar.

您可以通过向导航栏添加最小宽度来解决此问题。

 navigation {        
    margin-right: auto;    
    margin-left: auto;    
    max-width: 100%;    
    min-width: 1000px;
}

#2

You can solve this by adding a minimum width to a div surrounding the nav bar.

您可以通过向导航栏周围的div添加最小宽度来解决此问题。

In your case it would be in the .nav class

在你的情况下,它将在.nav类中

.nav {
   min-width:165px;
   position: absolute;
   top: 20px;
   right: 0px;
}

I don't know if you shared all the code with us, but from the code you provided 165px should be fine for the minimum width. If there is more code present that makes the navbar a different width then you may need to adjust the pixel amount of min-width:.

我不知道你是否与我们共享了所有代码,但是你提供的代码165px对于最小宽度应该没问题。如果存在更多代码使导航栏的宽度不同,则可能需要调整最小宽度的像素数量:

#3

This should work

这应该工作

ul {
  white-space: nowrap;
}

#1