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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

2795閲覧

カードを横並びに表示させたい

RyoYo

総合スコア9

Bootstrap

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/07/17 12:54

前提・実現したいこと

カードを横並びに表示させたいのですが、縦に並んでしまいます。
Bootstrapを使っています。

該当のソースコード

HTML

1div class="row no-padding"> 2 3 <div class="col-md-6"> 4 <div class="card text-center"> 5 <img class="card-img-top" src="img/human1.jpg"> 6 <div class="card-body"> 7 <h4>Jessica Miller</h4> 8 <p>"I have over 10 years of experimence in technology and haven't worked with a better team than Nuno</p> 9 </div> 10 </div> 11 </div> 12  13 <div class="col-md-6"> 14 <div class="card text-center"> 15 <img class="card-img-top" src="img/human2.jpg"> 16 <div class="card-body"> 17 <h4>Charles Davis</h4> 18 <p>"I have over 10 years of experimence in technology and haven't worked with a better team than Nuno</p> 19 </div> 20 </div> 21 </div> 22 23 </div>

CSS

1body{ 2 /*---overflow: hidden;---*/ 3 color: #505962; 4 font-family: 'Noto Sans JP', sans-serif; 5} 6 7.offset:before{ 8 height: 4.8rem; 9 margin-top: -4.8rem; 10 content: ""; 11 display: block; 12} 13 14/*--- navbar ---*/ 15 16.navbar { 17 text-transform: uppercase; 18 font-weight: 700; 19 font-size: .9rem; 20 letter-spacing: .1rem; 21 background: rgba(0, 0, 0, .6)!important; 22} 23 24.navbar-brand img { 25 height: 3rem; 26} 27 28.navbar-nav li { 29 padding-right: .7rem; 30} 31 32.navbar-dark .navbar-nav .nav-link { 33 color: white; 34 padding-top: .8rem; 35} 36 37.navbar-dark .navbar-nav .nav-link.active, 38.navbar-dark .navbar-nav .nav-link:hover { 39 color: #1ebba3; 40} 41 42/*---slider---*/ 43 44.carousel-item { 45 height: 100vh; 46} 47 48.carousel-caption { 49 position: absolute; 50 top: 38%; 51 text-transform: uppercase; 52 width: 100%; 53 right: 0; 54 left: 0; 55} 56 57.carousel-caption h1 { 58 font-size: 3.8rem; 59 font-weight: 700; 60 letter-spacing: .3rem; 61 text-shadow: .1rem .1rem .8rem black; 62 padding-bottom: 1rem; 63} 64 65.carousel-caption h3 { 66 font-size: 2rem; 67 text-shadow: .1rem .1rem .5rem black; 68 padding-bottom: 1.1rem; 69} 70 71.btn-lg { 72 border-width: medium; 73 border-radius: 0; 74 font-size: 1.1rem; 75} 76 77.carousel-caption { 78 pointer-events: none; 79} 80/*---course---*/ 81 82.narrow { 83 width: 75%; 84 margin: 0 auto; 85 padding-top: 2rem; 86} 87 88.btn-md { 89 border-width: medium; 90 border-radius: 0; 91 padding: .6rem 1.1rem; 92 text-transform: uppercase; 93 margin: 1rem; 94} 95 96.jumbotron { 97 border-radius: 0em; 98 padding: 3rem 0 2rem; 99} 100 101h3.heading { 102 font-size: 1.9rem; 103 font-weight: 700; 104 text-transform: uppercase; 105 padding-bottom: 1.9rem; 106} 107 108.heading-underline { 109 width: 3rem; 110 height: .2rem; 111 background-color: #1ebba3; 112 margin: 0 auto 2rem; 113} 114 115 116/*---PORTFOLI0---*/ 117 118.portfolio img { 119 max-width: 100%; 120 transition: transform .5s ease; 121} 122 123.row.no-padding [class*=col-] { 124 padding: 0; 125} 126 127.portfolio img:hover { 128 transform: scale(1.1); 129 cursor: zoom-in; 130} 131 132.portfolio { 133 overflow: hidden; 134} 135 136.card { 137 margin: 2rem; 138} 139 140/*---contact---*/ 141 142footer { 143 background-color: #40474e; 144 color: white; 145 padding: 2rem 0 3rem; 146 margin-top: 1rem; 147} 148 149footer img { 150 height: 3rem; 151 margin: 1.5rem 0; 152} 153 154footer a { 155 color: white; 156} 157 158footer svg.svg-inline--fa { 159 font-size: 1.6rem; 160 margin: 1.2rem .5rem 0 0; 161}  162 163footer svg.svg-inline--fa:hover { 164 color: #1ebba3; 165} 166 167hr.socket { 168 border-top: .2rem solid #666b71; 169 width: 100%; 170} 171 172 173/*---media queries---*/ 174 175@media (max-width: 767px) { 176 .carousel-caption h1 { 177 font-size: 2.3rem; 178 letter-spacing: .1rem; 179 padding-bottom: .5rem; 180 } 181 182 .carousel-caption h3 { 183 font-size: 1.2rem; 184 padding-bottom: 1.1rem; 185 } 186 187 .btn-lg { 188 font-size: 1rem; 189 } 190 191 .narrow h1 { 192 font-size: 1.5rem; 193 } 194 195 p.lead { 196 font-size: 1rem; 197 } 198}

試したこと

CSSに原因があると考えコメントアウトして調べましたが解決しませんでした。
したがって、原因は他にあるようですが分からなかったので質問させていただきました。

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

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

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

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

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

hatena19

2020/07/18 03:33

bootstrap のバージョンはなんですか。 bootstrap4.5.0 で提示のコードを確認してみましたが、問題なく横並びになりました。 画面幅か768pxより小さいと1列表示になるので縦並びになりますが、そういうことではないですよね。
RyoYo

2020/07/19 13:26

そういうことではないです。
guest

回答1

0

ベストアンサー

1行目<div class="row no-padding">にcard-wrapperなど適当なclassを追加して
flexboxにするのが、一番簡単ではないでしょうか。

カードのサイズ等細かな設定は、<div class="col-md-6 card-container">にcard-containerなどのclassをつければ、良いかと思います。

html

1 <div class="row no-padding card-wrapper"> 2 <div class="col-md-6 card-container"> 3 <div class="card text-center"> 4 <img class="card-img-top" src="img/human1.jpg"> 5 <div class="card-body"> 6 <h4>Jessica Miller</h4> 7 <p>"I have over 10 years of experimence in technology and haven't worked with a better team than Nuno</p> 8 </div> 9 </div> 10 </div> 11 <div class="col-md-6 card-container"> 12 <div class="card text-center"> 13 <img class="card-img-top" src="img/human2.jpg"> 14 <div class="card-body"> 15 <h4>Charles Davis</h4> 16 <p>"I have over 10 years of experimence in technology and haven't worked with a better team than Nuno</p> 17 </div> 18 </div> 19 </div> 20 </div>

css

1.card-wrapper { 2 display:flex; 3}

投稿2020/07/17 14:53

Naz.

総合スコア13

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

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

hatena19

2020/07/18 03:35

bootstrap の場合、rowクラスに display:flex; が設定されているのでそういう問題ではないかと。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問