これらの行が同じ行に表示されるのはなぜですか？ （ブートストラップ）

Question

3つの異なる行が同じ行に表示される理由はわかりません。行は通常異なる行に表示されませんか？私は行や列の高さを固定してみました。ここで

はフィドルです：https://jsfiddle.net/qvuo4bqw/

<div class="container-fluid"> 
<div id="bubble"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <h3 id="question">Question Here</h3> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-12"> 
      <ul class="list-inline"> 
       <li>Disagree</li> 
       <label class="disagree" id="disagree-btn" val="0"></label> 
       <label class="disagree" val="0.5"></label> 
       <label id="neutral" val="1"></label> 
       <label class="agree" val="2"></label> 
       <label class="agree" id="agree-btn" val="3"></label> 
       <li>Agree</li> 
      </ul> 
     </div> 
    </div> 


    <div class="row"> 
     <div class="col-md-12"> 
      <button class="btn btn-warning" id="back-btn">Back</button> 
      <button class="btn btn-primary" id="next-btn">Next</button> 
     </div> 
    </div> 

    <br><br> 

</div> 

.container-fluid { 
    padding-top: 5%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 


#bubble { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    border-radius: 100%; 
    height: 800px; 
    width: 800px; 
    border-color: black; 
    border-style: solid; 
    border-width: 5px; 
    background: linear-gradient(0deg, #AA3939 0%, #55AA55 0%); 
    color: white; 
} 

.row { 
    height: 150px; 
} 


ul>label { 
    width: 50px; 
    height: 50px; 
    border-radius: 100%; 
    border-style: solid; 
    cursor: pointer; 
    text-align: center; 
} 

.agree { 
    border-color: #226666; 
} 

.disagree { 
    border-color: #AA6C39; 
} 

#disagree-btn, #agree-btn { 
    height: 60px; 
    width: 60px; 
} 

#next-btn, #back-btn { 
    height: 50px; 
    width: 100px; 
} 

#neutral { 
    height: 40px; 
    width: 40px; 
    border-color: gray; 
} 

Answer 1

三つの異なる行が同じ行に表示されている理由を私は理解していません。

あなたの要素はフレックスコンテナ（#bubbleはdisplay: flex）に含まれているため、

フレックスコンテナの2つの初期設定は、flex-direction: rowとflex-wrap: nowrapです。これは、子要素が1行に水平に整列して折り返されないことを意味します。あなたが別の行に表示する#bubbleの子供をしたい場合は

、ここでいくつかのオプションは、あなたがして起動することができます：

• スイッチflex-direction: columnに、または
• flex-wrap: wrapを有効、または
• スイッチへdisplay: block

Answer 2

あなたはいくつかの問題があります。A）.list-inline> liを表示するように設定しました：inline-block。だからインラインでそれがあるのです。 B）私が見たもう一つの問題はあなたがあなたのulの中に唯一の李を持っていたことでした。おそらくそれはインラインに現れるようにするでしょう。ラベルをli要素の中に入れないようにするには、別のliのdivの中に入れてください。これは正しいHTML書式ではありません。

Answer 3

あなたは、クラス= "行"

を繰り返している代わりに、これを試してみてください：

<div class="container-fluid"> 
<div id="bubble"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <h3 id="question">Question Here</h3> 
     </div> 
     <div class="col-md-12"> 
      <ul class="list-inline"> 
       <li>Disagree</li> 
       <label class="disagree" id="disagree-btn" val="0"></label> 
       <label class="disagree" val="0.5"></label> 
       <label id="neutral" val="1"></label> 
       <label class="agree" val="2"></label> 
       <label class="agree" id="agree-btn" val="3"></label> 
       <li>Agree</li> 
      </ul> 
     </div> 
     <div class="col-md-12"> 
      <button class="btn btn-warning" id="back-btn">Back</button> 
      <button class="btn btn-primary" id="next-btn">Next</button> 
     </div> 
    </div> 

    <br><br> 

</div>