文字环绕左侧导航菜单

我正在尝试制作菜单。我想要正确的文本，但我仍然希望手机是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 –