bootstrapで580px以下時、liを縦並びにしたい。

bootstrapにて、580px以下の場合にリストを縦並びにしたいです。

bootstrapを使用してLPの再現を行なっています。
その中でhover時にアンダーラインが現れるaタグをコピペ致しました。
ブラウザサイズPC時は横並びで良かったのですが、580px以下の時に縦並びにしたいです。
コピペしただけなのでどこをいじれば縦並びになるのかあまり理解できていないのと、
もともとリストって縦並びじゃなかったの...?みたいな感じでちんぷんかんぷんでいます。

HTML

<!DOCTYPE>
<html lang="ja">
	<head>
	<meta charset="uft-8">
	<title>1-1</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
		<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="css/stylesheet.css">
	<link rel="stylesheet" href="css/res.css">
	</head>

	<body>

		<header>
				<div class="container-custom">
					<h1 class="logo">
						<a href=""><img src="img/logo.png"></a>
					</h1>
				</div>
				<div class="container-custom">
					<div class="top rounded-lg"></div>
				</div>

				<div class="container-custom">
					<nav class="navbar navbar-expand navbar-light py-4 justify-content-center">
					<ul class="navbar-nav">
					<li class="nav-item mx-4"><a href="" class="nav-link">Home</a></li>
					<li class="nav-item mx-4"><a href="" class="nav-link">About</a></li>
					<li class="nav-item mx-4"><a href="" class="nav-link">Gallary</a></li>
					<li class="nav-item mx-4"><a href="" class="nav-link">Link</a></li>
					</ul>
					</nav>
				</div>
		</header>

CSS

.logo{
	font-size:100%;
	margin-top:35px;
	margin-bottom:35px;
	text-align:center;
}

.logo img{
	width:400px;
}

.container-custom{
	width:94%;
	margin:0 auto;

}

.top{
	padding-top: 40%;
	width:100%;
	background-image: url(../img/top.png);
	background-size: cover;
}

.nav-item{
	font-size: 120%;
}

nav a {
  position: relative;
  text-decoration: none;
}
nav a::after {
  position: absolute;
  bottom: 2px;
  left:-12px;
  content: '';
  width: 140%;
  height: 2px;
  background: #333;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
nav a:hover::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}

試したこと

nav-itemやnavbar-navにflex-columnを書いたりしましたが動きませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

もともとリストって縦並びじゃなかったの...?みたいな感じでちんぷんかんぷんでいます。

Bootstrap 4 では、要素の整列に flexbox を使用しているため、本来リスト要素が持つ整形規則は上書きされています。今回の場合、メディアクエリと flex-direction プロパティを使用した以下のような CSS を適用することで、質問者さんの実現したいことが行えると思います (動作確認用リンク)。

CSS
1@media (max-width: 580px) {  /* 追加 */
2  .navbar-expand .navbar-nav {
3    flex-direction: column !important;
4  }
5}

HTML
1<!DOCTYPE>
2<html lang="ja">
3
4  <head>
5    <meta charset="uft-8">
6    <title>1-1</title>
7    <meta name="viewport" content="width=device-width,initial-scale=1">
8    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
9    <style>
10      .logo {
11        font-size: 100%;
12        margin-top: 35px;
13        margin-bottom: 35px;
14        text-align: center;
15      }
16
17      .logo img {
18        width: 400px;
19      }
20
21      .container-custom {
22        width: 94%;
23        margin: 0 auto;
24
25      }
26
27      .top {
28        padding-top: 40%;
29        width: 100%;
30        background-image: url(../img/top.png);
31        background-size: cover;
32      }
33
34      .nav-item {
35        font-size: 120%;
36      }
37
38      nav a {
39        position: relative;
40        text-decoration: none;
41      }
42
43      nav a::after {
44        position: absolute;
45        bottom: 2px;
46        left: -12px;
47        content: '';
48        width: 140%;
49        height: 2px;
50        background: #333;
51        opacity: 0;
52        visibility: hidden;
53        transition: .3s;
54      }
55
56      nav a:hover::after {
57        bottom: -4px;
58        opacity: 1;
59        visibility: visible;
60      }
61
62      @media (max-width: 580px) { /* 追加 */
63        .navbar-expand .navbar-nav {
64          flex-direction: column !important;
65        }
66      }
67    </style>
68  </head>
69
70  <body>
71
72    <header>
73      <div class="container-custom">
74        <h1 class="logo">
75          <a href=""><img src="img/logo.png"></a>
76        </h1>
77      </div>
78      <div class="container-custom">
79        <div class="top rounded-lg"></div>
80      </div>
81
82      <div class="container-custom">
83        <nav class="navbar navbar-expand navbar-light py-4 justify-content-center">
84          <ul class="navbar-nav">
85            <li class="nav-item mx-4"><a href="" class="nav-link">Home</a></li>
86            <li class="nav-item mx-4"><a href="" class="nav-link">About</a></li>
87            <li class="nav-item mx-4"><a href="" class="nav-link">Gallary</a></li>
88            <li class="nav-item mx-4"><a href="" class="nav-link">Link</a></li>
89          </ul>
90        </nav>
91      </div>
92    </header>
93  </body>
94
95</html>

投稿2019/10/20 12:11

s8_chu

総合スコア14731

matcha_hai

2019/10/22 07:33

コピペしたら実現できました！ bootstrapではもともとflexboxを使用しているということは、親要素にdisplay:flex;は記載しなくても良いのでしょうか？

s8_chu

2019/10/25 23:24 編集

`display: flex` が適用されている要素であった場合は、記載しなくても構いません。Bootstrap4 では、要素を整列させているときは基本的に flexbox を使用していますが、もし `display: flex` が適用されているかどうか不安であれば、開発者ツールを使用して確認しておくと良いと思います。

行動規範の内容に同意します