CSS：希望文本在同一行

HTMLCSS：希望文本在同一行

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

人名和活動名稱，兩者具有相同的數字，是字符。但是，當我在我的網頁上看到時。我得到人名，進兩行。

以下是相同的圖像。

謝謝。

來源

2016-08-12 Bhavin Shah

嘗試調整山坳-lg-2到col-lg-3有更多的寬度。所以它不會有2行。 –

或者使用'white-space：nowrap'。 – skobaljic

發佈您的css代碼 –

更新這樣的：

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

來源

2016-08-12 07:49:11

謝謝你的答案..但我必須使用** col-lg-2 **和** col-lg-10 **。因爲對於文本框我必須增加它的寬度。 –

使用白色空間：nowrap –

使用形式水平類來查找在同一行中的所有設備和文字好。

大型設備：標籤和輸入在一行中。

小設備（移動）：標籤位於輸入的頂部。它看起來不錯。

試試這個。

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

來源

2016-08-12 07:59:47

我曾用於我以前的任務。但是需要同一行文本和輸入字段。這就是爲什麼我使用這一個 –

只需添加下面的代碼在你的CSS

。控制標籤{空白：NOWRAP;}

來源

2016-08-12 08:04:56

CSS：希望文本在同一行

回答

相關問題