[英]CSS: Want text to be in the same line
HTML
<div class="form-group">
<label class="col-lg-2 control-label">Person Name </label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="Enter Person Name ">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Event Title </label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="Enter Person Name ">
</div>
</div>
人物名称和事件标题 ，都具有相同的字符数，即11 。 但是当我在网页上看到时， 我得到Person Name ，分为两行。
这是相同的图像。
谢谢。
像这样更新：
<label class="col-lg-3 control-label">Person Name </label>
<div class="col-lg-9">
使用水平表单类在所有设备和同一行中的文本中看起来都不错。
大型设备 ：标签和输入在一行中。
小型设备（移动设备） ：标签位于输入的顶部。 而且看起来不错。
尝试这个。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="control-label col-sm-2" for="Person Name" >Person Name:</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="Enter Person Name"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="Event Title">Event Title:</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="Enter Person Name"> </div> </div> </form> </div> </body> </html>
只需在css中添加以下代码
.control-label {空白：nowrap;}
想要在同一行 html/css/bootstrap 上内联 SVG ICON 和文本
[英]Want to inline SVG ICON and text on same line html/css/bootstrap
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.