BinaryDevelop
  1. ホーム
  2. html

[解決済み] Bootstrapのinline-block表示について【終了しました

2022-02-25 20:55:47

質問

HTMLとBOOTSTRAPだけを使ってウェブサイトを構築するタスクがあるのですが、サイドナビゲーションバー（コードは以下に添付）に問題が発生しています。なぜ私のコードの結果は、2つのインラインブロックとして表示されず、ブロックが次々に表示されるのですか？私はブートストラップ定義済みのクラス＆quot;d-inline-block＆quot;を使用していますが、それは2番目のdiv要素内の段落が1行よりも短い場合にのみ動作します。私は2つのブロックを作りたいのですが、1つはナビゲーションブロックのように左に、もう1つは右側にいくつかの情報を表示したいのです。 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="container">
            <div class="d-inline-block">
                <ul class="list-group">
                    <li class="list-group-item">one</li>
                    <li class="list-group-item">two</li>
                    <li class="list-group-item">three</li>
                    <li class="list-group-item">four</li>
                    <li class="list-group-item">five</li>
                </ul>
            </div>
            <div class="d-inline-block">
                <h1>Lorem Ipsum</h1>
                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
 industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        </div>
    </body>
</html>

私の間違いを指摘するか、コードに何を追加すべきかをアドバイスしてください。

(課題は、HTMLとBOOTSTRAPのみを使用することです(独自のCSSコードを追加できません。定義済みのBOOTSTRAPクラスのみ使用可能です))

どのように解決するのですか？

他のCSSルールを作らずにbootstrapを使うには、以下のようにbootstrap gridを使うのが良いと思います。 

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <ul class="list-group">
          <li class="list-group-item">one</li>
          <li class="list-group-item">two</li>
          <li class="list-group-item">three</li>
          <li class="list-group-item">four</li>
          <li class="list-group-item">five</li>
        </ul>

      </div>
      <div class="col-sm-6">
        <h1>Lorem Ipsum</h1>
        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
  </div>
</body>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します