テキストは私の左のナビゲーションメニューをラップしています

Question

私はメニューを作ろうとしています。私はそれの右側にテキストが欲しいが、私はまだ携帯電話を100％の幅にしたい。それがデスクトップ上にある場合、どのようにして列をdivに折り返さないようにしますか？私はこれを100％の高さにすることができましたが、モバイルでは動作しない可能性があります。

jsfiddle.net/La909cq3 コンテナをデスクトップの幅に伸ばすと、メニューの右側に名前が表示されます。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/> 
 
    <div class="col-md-4"> 
 
     <ul> 
 
      <li> 
 
       <a ui-sref="manage.newPerson"><b>Groups of People</b></a> 
 
      </li> 
 
      <li> 
 
       <a ui-sref="manage.newPerson"><b>Make a New Person</b></a> 
 
      </li> 
 
      <li> 
 
       <a ui-sref="manage.people"><b>Make a New Manager</b></a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <form> 
 
      <div class="form-group"> 
 
       <label for="exampleInputEmail1">Name</label> 
 
       <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label for="exampleInputPassword1">Phone Number</label> 
 
       <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
 
      </div> 
 
      <button type="submit" class="btn btn-default">Submit</button> 
 
     </form> 
 
    </div>

Answer 1

あなたはCSSでword-wrapを使用してみましたか？

これを試してみてください。私にとってはうまくいくと思います。

word-wrap: break-word; 
white-space:normal; 

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

Answer 2

私はちょうどフォームを包むあなたのdivにclear:both;を置きます。私はあなたのアイテムのリストの右側に浮かんで停止するあなたの '名前'見出しをした。

https://jsfiddle.net/6beL3rn5/

Answer 3

それは本当に唯一のメニューとフォームが別のグリッド空間にする必要があるという事実に関係しています。メニューはcol-md-4にラップされています。これは左に流れますが、フォームの周りのdivのグリッドクラスはありません。これを行うと、私は

<div class="row"> 

と外側のdivを追加する方法で

そのルックを支援し、メニューとフォームのdiv要素の両方にCOL-MD-12クラスを追加します。

http://jsfiddle.net/gbn4hnw1/

Answer 4

一つの解決策は、第二のdiv http://jsfiddle.net/La909cq3/1/

<div class="col-md-4">