Question

如何使用Bootstrap 4响应创建此顶部导航栏。通过响应我的意思是，我想让这个导航栏在小屏幕中折叠，所以它很整洁。

我尝试添加'xs'进行导航，但它不起作用（它没有崩溃）。

bootstrap 4是否支持此功能？或者我们是否必须制作自定义样式才能实现这一目标？任何意见都将不胜感激！

/*
 * Masthead for nav
 */

.blog-masthead {
  background-color: #0275D8;
  -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
          box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}

/* Nav links */
.blog-nav-item {
  position: relative;
  display: inline-block;
  padding: 10px;
  font-weight: 500;
  color: #fff;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
  color: #fff;
  text-decoration: none;
}

/* Active state gets a caret at the bottom */
.blog-nav .active {
  color: #fff;
}
.blog-nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;
}

* {
  border-radius: 0 !important;
}

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

/*
 * Blog name and description
 */




/*
 * Footer
 */

.blog-footer {
  padding: 40px 0;
  color: #999;
  text-align: center;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
  margin-bottom: 0;
}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="/favicon.ico">

  
  <title>Bootstrap 4 Template</title>

  <link rel="stylesheet" href="Navigation Bar.css">
  <link rel="stylesheet" href="Sticky Footer.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">

  <style type="text/css">
    
    html,
    body {
      overflow-x: hidden;
    }
    
  </style>

</head>

<body>

  <div class="blog-masthead col-xs-12">
        <div class="container">
            <nav class="blog-nav">
                <a class="blog-nav-item active" href="#">Home</a>
                <a class="blog-nav-item" href="#">New features</a>
                <a class="blog-nav-item" href="#">Press</a>
                <a class="blog-nav-item" href="#">New hires</a>
                <a class="blog-nav-item" href="#">About</a>
            </nav>
        </div>
    </div>

Answer 1

您可以使用响应的flexbox utility classes。

使用d-flex
使用flex-sm-row使其在sm及以上水平
使用flex-column使其在xs

https://www.codeply.com/go/wNPuPmnAvw

 <div class="blog-masthead">
    <div class="container">
        <nav class="blog-nav d-flex flex-column flex-sm-row">
            <a class="blog-nav-item active mr-2" href="#">Home</a>
            <a class="blog-nav-item mr-2" href="#">New features</a>
            <a class="blog-nav-item mr-2" href="#">Press</a>
            <a class="blog-nav-item mr-2" href="#">New hires</a>
            <a class="blog-nav-item mr-2" href="#">About</a>
        </nav>
    </div>
</div>

Bootstrap 4在xs屏幕宽度

1 个答案: