Question

我正在WAMP网站上工作，我正在使用bootstrap。我已经阅读了有关同一问题的其他答案，建议在我的容器上使用固定宽度并覆盖引导样式 - 但我无法得到它。

因此，当我调整窗口大小（大约960px到760px）时，我的标签会崩溃。然后小于760px的任何东西显示汉堡包导航栏。我想要保持标签不会折叠直到汉堡包显示，或者只是在标签折叠时显示汉堡包。但是，我不能让它去工作。这是我的相关代码（style.css和header.php）：

/* Reset CSS*/

html, body, header, footer, hgroup, nav, article, section, figure, figcaption, h1, h2, h3, ul, li, body, div, p, img {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  /* Aligns the baseline of the element with the baseline of the parent element. This is default*/
  vertical-align: baseline;
}

/* Override */

.navbar-default .navbar-nav>li>a {
  color: #777;
  border-bottom: 1px solid #9b9b9b;
}


.navbar-default .navbar-nav>li>a.active,
.navbar-default .navbar-nav>li.active>a,
.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover {
  color: #50c4e9; /* Blue */
}

.row {
  margin: 0 auto;
}

.navbar-default .navbar-nav>li>a:focus, 
.navbar-default .navbar-nav>li>a:hover {
  color: #50c4e9; /* Blue */
  background-color: transparent;
}   

.navbar-header {
  background-color: #fff;
}

footer,
footer p {
  color: #777
}

/* Content */

@font-face {
  font-family: 'Gill Sans';
  src: url('../fonts/gill-sans-mt-light.ttf') format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: 'Gill Sans Regular';
  src: url('../fonts/gill-sans-mt-regular/GIL.ttf') format('truetype');
  font-weight: bold;
}


html,
body {
  height: 100%;
}

body {
  font-family: 'Gill Sans', Calibri, sans-serif;
  color: #777; /* Grey #756c6c */
  margin: 0;
}

.active {
  color: #50c4e9; /* Blue */
}

/* Responsive image */
@media(max-width:991px) {
    #splash-preload {
    }
}

@media (min-width: 768px) and (max-width: 979px) {
   /* Take off border from nav when phone size */
   .navbar-default .navbar-nav>li>a {
     color: #777;
     border-bottom: 0;
   }
}

/* If JS is disabled - default size */
img {
  height: 530px;
  width: 1110px;
}

.my-icon {
  margin-left: 30px;
  height: 48px;
  width: 48px;
}

<!-- Header Navigation -->
<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
            <a class="navbar-brand" href="index.php">m design</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <?php
                    echo '<li><a ' .(basename($_SERVER['PHP_SELF']) == 'awards.php' ? ' class="active"' : ''). ' href="awards.php">awards & recognition</a></li>';
                    echo '<li><a ' . (basename($_SERVER['PHP_SELF']) == 'work.php' ? ' class="active"' : '') . ' href="work.php">work</a></li>';
                    echo '<li><a ' . (basename($_SERVER['PHP_SELF']) == 'about.php' ? ' class="active"' : '') . ' href="about.php">about</a></li>';
                    echo '<li><a ' . (basename($_SERVER['PHP_SELF']) == 'contact.php' ? ' class="active"' : '') . ' href="contact.php">contact</a></li>';
                ?>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

（我的CSS文件大小顺序为：bootstrap CSS，然后是business-casual bootstrap CSS，后面是我自己的CSS）

Image of tabs in expanded window

Image of (undesirable) collapsing tabs

Answer 1

由于StackOverflow不支持PHP，我将采取疯狂猜测并假设您的li处于display: inline-block;模式而非float: left模式。如果他们是float: left，您应该在.navbar-collapse上设置以下规则：

.navbar-collapse {
  float: none !important;
  display: inline-block;
  vertical-align: middle;
}

至于阻止它们包装，就像向同一个块添加一个CSS规则一样简单。那是white-space: nowrap，它阻止文档流包装会滚动其容器边缘的元素。在这种情况下，容器是您的body元素。你的新块看起来像这样：

.navbar-collapse {
  float: none !important;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

当然，如果你的元素已经处于display: inline-block模式且没有浮动，那么该块只是：

.navbar-collapse {
  white-space: nowrap;
}

希望有所帮助！

如何在窗口调整大小时保持标签不被折叠或显示汉堡包？

1 个答案: