質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

3512閲覧

[Bootstrap] ヘッダー内で、ボタンを上下中央に配置する方法を知りたいです

Heroto

総合スコア8

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/02/27 05:12

[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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

html

1<div class="input-group mb-3 col-sm-8 d-flex justify-content-center align-items-center justify-content-end ">

ぱっと見た感じ、mb-3 のせいで、input-group の下にマージンが入っているのではないでしょうか…?

mb-3 を削除してみて下さい。

投稿2020/02/27 05:40

kyoruni

総合スコア93

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Heroto

2020/02/27 05:48

直りました。 しっかりBootstrapの仕様について、理解しないといけないと感じました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問