文字環繞左側導航菜單

我正在嘗試製作菜單。我想要正確的文本，但我仍然希望手機是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>

來源

2016-07-13 Tyler L

你可以放在一起你現在有什麼小提琴？ – HisPowerLevelIsOver9000

https://jsfiddle.net/La909cq3/您會注意到「name」位於菜單的右側，但其他所有內容都位於菜單下（您可能必須拉伸寬度以查看響應效果） –

-1

您是否嘗試過在CSS使用word-wrap？

試試這個，我覺得它適合我。

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

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

來源

2016-07-13 20:48:48

我試過自動換行，它仍然表現相同。我想要做的是爲移動設備創建垂直列表，而不是水平（導航欄縮小到水平，我想垂直列表的行爲就像col-md-4）http://www.w3schools.com /css/tryit.asp?filename=trycss_navbar_vertical_responsive –

這有你所需要的基礎知識。 http://www.menucool.com/ddmenu/create-mobile-friendly-responsive-menu –