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

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

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

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

Q&A

1回答

416閲覧

bootstrapでの画面レイアウト

退会済みユーザー

退会済みユーザー

総合スコア0

Bootstrap

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

0グッド

1クリップ

投稿2019/10/03 01:36

編集2022/01/12 10:55

html

1<div class="row"> 2 <div class="img-holder"> 3 </div> 4 <div class="card"> 5 <div> 6 <div class="form-content"> 7 <div class="form-items"> 8 <h3>Login to account</h3> 9 <input class="form-control" type="text" name="loginID" placeholder="loginID" required> 10 <input class="form-control" type="password" name="Password" placeholder="Password" required> 11 <div class="form-button"> 12 <button id="submit" type="submit">Login</button> 13 <a th:href="@{/password}">パスワード再発行</a> 14 </div> 15 </div> 16 </div> 17 </div> 18 </div> 19 </div>

css

1body { 2 background-image: url("../img/img2.jpg"); 3 background-position: center center; 4 background-attachment: fixed; 5 background-size: cover; 6} 7 8.container { 9 padding-right: 450px; 10 padding-left: 450px; 11 margin-right: auto; 12 margin-left: auto; 13 14} 15 16img.logo-size { 17width: 96px; 18height: 65px; 19margin:20px; 20} 21 22.positioned { 23 position: absolute; 24 top: 120px; 25 left: 140px; 26} 27 28.form-holder{ 29 30 display: #808080; 31} 32 33.card { 34 width: 500px; 35 height: 200px; 36 background-color:#808080; 37}

上記のコードでbootstrapのcardを使いパネルを作成しましたが、cardの横幅を変更できませんでした。
どうしたら正方形のパネルをつくれるか教えてほしいです。

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

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

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

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

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

miyabi_takatsuk

2019/10/03 02:27

ご自身でどこまで調べ、どこまで理解し、どこからわからないか、を記載してください。 調べ方なような気がするので、 自身が使った検索キーワードも記載されるといいでしょう。 (と言うのも調べ方しっかりしてればさっくり出てくる内容)
退会済みユーザー

退会済みユーザー

2019/10/03 04:06

bootstrapの本も参考にしましたが、正方形のpanelの作成がわかりませんでした。 ネットではbootstrap 機能 、bootstrap panel , card,などで探してみましたが、いい案が見つかりませんでした。本で、card,form,panelがありましたので、その例をさがしましたが、自分のしたい正方形のパネルの例がみつけられませんでした。
miyabi_takatsuk

2019/10/03 04:10

もっと単純に、bootstrap 正方形 とか、やりたいことをそのまま入れたキーワードの方がでてくると思います。 もう少し調べて、それでもできなければ、コメントいただければと思います。
guest

回答1

0

Bootstrap 3 であればそのままで角丸になるはずです。

CSS

1.panel { 2 width: 300px; 3 height: 300px; 4}

Bootstrap 4 では panel ではなく card に変わっているのでドキュメントを読んでみてください。
https://getbootstrap.com/docs/4.3/components/card/

投稿2019/10/03 04:22

x_x

総合スコア13749

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

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

退会済みユーザー

退会済みユーザー

2019/10/03 04:39

有り難うございます。パネルができました。パネルができ、width: 300px;を500px;に変更して横幅を少し大きくしたいのですが、変更できませんでした。これはどうしてか教えて頂きたいですm(__)m
x_x

2019/10/03 05:14

キャッシュですかね?
退会済みユーザー

退会済みユーザー

2019/10/03 05:20

ありがとうございます。キャッシュをしてもinputと横幅がぴったり同じになってしまいます。。
x_x

2019/10/03 05:25

card の幅ですよね? input は form-control がついているので常に100%でないですか?
退会済みユーザー

退会済みユーザー

2019/10/03 05:34

はい、cardの横幅を変えたいです。 form-control を消して試しましたところ、inputの大きさが小さくできました。 でもcardは横幅が600pxにしても変化はありませんでした。 高さは変更可能です。でも横が変更できないです。。
x_x

2019/10/03 05:40

再現するコードがないので不明です。 少なくとも card 自体には幅を決めるものはありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問