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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

2回答

6481閲覧

Bootstrapで1つだけ右寄せでそれ以外は左寄せのボタンを表示したい

moshi

総合スコア90

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2019/04/05 02:56

前提・実現したいこと

Bootstrapの勉強をしています。

1つだけ右寄せでそれ以外は左寄せ flex - CSS
のようにボタンを一つだけ右寄せにしたいです。

発生している問題・エラーメッセージ

すべて左寄せになってしまう

該当のソースコード

<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class="btn-toolbar" role="toolbar" aria-label="ボタングループのツールバー"> <div class="btn-group mr-2" role="group" aria-label="第一グループ"> <button type="button" class="btn btn btn-outline-primary"> <i class="fas fa-home"></i> メイン画面 </button> </div> <div class="btn-group mr-2" role="group" aria-label="第二グループ"> <button type="button" class="btn btn btn-outline-primary">AAA</button> </div> <div class="btn-group mr-2" role="group" aria-label="第三グループ"> <button type="button" class="btn btn btn-outline-primary">BBB</button> </div> <div class="float-right"> <div class="btn-group mr-2" role="group" aria-label="第四グループ" margin-left=auto;> <button type="button" class="btn btn btn-outline-primary">CCC</button> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>

試したこと

横の配置ユーティリティ(Float)
を参考に上記のソースを作成しましたが、うまく右寄せにできませんでした。

補足情報(FW/ツールのバージョンなど)

Bootstrap4

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

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

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

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

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

guest

回答2

0

ベストアンサー

flex アイテムに対して、floatプロパティclearプロパティを適用したとしても、それらは無視されます(参考)。ml-autoクラスを用いることで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

HTML

1<!doctype html> 2<html lang="ja"> 3 4<head> 5 <!-- Required meta tags --> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 10 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 11 <title>Hello, world!</title> 12</head> 13 14<body> 15 <div class="btn-toolbar" role="toolbar" aria-label="ボタングループのツールバー"> 16 <div class="btn-group mr-2" role="group" aria-label="第一グループ"> 17 <button type="button" class="btn btn btn-outline-primary"> 18 <i class="fas fa-home"></i> メイン画面 19 </button> 20 </div> 21 <div class="btn-group mr-2" role="group" aria-label="第二グループ"> 22 <button type="button" class="btn btn btn-outline-primary">AAA</button> 23 </div> 24 <div class="btn-group mr-2" role="group" aria-label="第三グループ"> 25 <button type="button" class="btn btn btn-outline-primary">BBB</button> 26 </div> 27 28 <div class="btn-group mr-2 ml-auto" role="group" aria-label="第四グループ" margin-left=auto;> 29 <button type="button" class="btn btn btn-outline-primary">CCC</button> 30 </div> 31 </div> 32 <!-- Optional JavaScript --> 33 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 34 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 35 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 36 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 37</body> 38 39</html>

投稿2019/04/05 03:02

編集2019/04/05 03:06
s8_chu

総合スコア14731

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

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

moshi

2019/04/05 03:04

ml-autoをclassに追加したら期待通りの動作をしました! ありがとうございます。
guest

0

ml-auto です。
https://getbootstrap.com/docs/4.3/utilities/flex/#auto-margins

flex なら float は関係ないのでうまくいかないでしょう

投稿2019/04/05 03:04

x_x

総合スコア13749

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

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

moshi

2019/04/05 03:06

混乱していて別のプロパティであることすら気づいていませんでした。 ご回答ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問