Question

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 。但是当我在我的网页上看到时。我得到人名，排成两行。

这是相同的图像。

谢谢。

Answer 1

像这样更新：

<label class="col-lg-3 control-label">Person Name </label>
<div class="col-lg-9">

Answer 2

使用 form-horizontal 类在同一行中的所有设备和文字中看起来很好。

大型设备：标签和输入在一行中。

小型设备（移动设备）：标签位于输入顶部。它看起来不错。

试试这个。

＆＃13;

<!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>

＆＃13;

Answer 3

只需在您的css中添加以下代码

即可

.control-label {white-space：nowrap;}

CSS：希望文本在同一行

3 个答案: