[Bootstrap] ヘッダー内で、ボタンを上下中央に配置する方法を知りたいです
知りたいこと
以下のように、Bootstrapを使用して、WEBサイトのヘッダーを作成しているところです。
見ての通り、ドロップダウン、入力フォーム、検索ボタンが全て中央から少し上にずれてしまっています。
これらを、「Site Name」というテキストと同じ高さまで揃えたいと思っています。
よろしくお願いいたします!
コードは以下です
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>Bootstrap Sample</title> 9 <!-- BootstrapのCSS読み込み --> 10 <link href="css/bootstrap.min.css" rel="stylesheet"> 11 <!-- jQuery読み込み --> 12 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 13 <!-- BootstrapのJS読み込み --> 14 <script src="js/bootstrap.min.js"></script> 15</head> 16 17<header> 18 <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> 19 <a class="navbar-brand col-sm-3" href="#">Site Name</a> 20 <div class="input-group mb-3 col-sm-8 d-flex justify-content-center align-items-center justify-content-end "> 21 <div class="input-group-prepend"> 22 <button class="btn btn-outline-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Area</button> 23 <div class="dropdown-menu"> 24 <a class="dropdown-item" href="#">All</a> 25 <a class="dropdown-item" href="#">Hanoi</a> 26 <a class="dropdown-item" href="#">Hochimin</a> 27 </div> 28 </div> 29 <input type="text" class="form-control" aria-label="Text input with dropdown button"> 30 <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> 31 32 </div> 33 </nav> 34</header> 35 36<body> 37 <h1>Hello, world!</h1> 38</body> 39 40</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/27 05:48