文字环绕在我的左侧导航菜单中

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

我只是说clear:both; 在环绕表格的div上。 一旦我做到了，您的“名称”标题就会停止浮动到您的项目列表右侧。

https://jsfiddle.net/6beL3rn5/

Answer 2

实际上，这仅与菜单和表单需要位于单独的网格空间中有关。 您将菜单包装在col-md-4中，该菜单将向左流动...但是表格周围的div没有网格类。 这样做将有助于

看看我如何添加一个外部div

<div class="row">

并将col-md-12类添加到菜单和表单div中。

http://jsfiddle.net/gbn4hnw1/

Answer 3

一种解决方案是将col-md-4放在第二个div上http://jsfiddle.net/La909cq3/1/

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

Answer 4

您是否尝试过在CSS使用word-wrap ？

试试这个，我发现它很适合我。

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

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