我想在每個輸入的右側添加注釋。這是我使用引導程式布局創建的
2.無文字填充：
uj5u.com熱心網友回復：
你的類屬性中有逗號。這是無效的，并導致后面的類沒有被應用。當它們被移除時（連同令人討厭的行內樣式），一切都按預期作業。
甚至不需要行嵌套。我已經洗掉了它，連同換行符，它不應該用于布局，而且顯然沒有做任何事情。
默認情況下，Bootstrap 將輸入放在移動設備 (xs) 的標簽下方，因此在窄螢屏上有輸入的空間。我不建議更改它，但如果您愿意，只需使用col-xs-* 而不是col-sm-*這樣您就不會忽略最小的斷點。
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div>
<section class="content container-fluid">
<form id="submitForm">
<fieldset>
<div class="form-group row">
<label for="userId" class="col-sm-1 col-form-label">User</label>
<div class="col-sm-6">
<select class="form-control" id="userId">
<option value="1">Alex</option>
<option value="39">Kent</option>
<option value="6">Nick</option>
</select>
</div>
<div class="col-sm-5 small">
If your name is not available, please contact the Officer.
</div>
</div>
<div class="form-group row">
<label for="purposeNames" class="col-md-1 col-form-label">Purpose</label>
<div class="col-sm-6">
<input type="text" id="purposeNames" class="form-control" placeholder="Purpose" />
</div>
<div class="col-sm-5 small">
Feel free to select more than one purpose per ticket e.g. email instant messaging. Such purpose combinations will only proportionally affect purpose statistics. Please do not use online time that was initially requested for purposes of the category
"Not affecting personal quota" (e.g. chores) also for checking personal emails, instant messaging etc. Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.
</div>
</div>
<div class="form-group row">
<label for="userPassword" class="col-sm-1 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="userPassword" placeholder="Password">
</div>
<div class="col-sm-5 small">
Please use combination of letter, symbol & number.
</div>
</div>
</fieldset>
</form>
</section>
</div>
</body>uj5u.com熱心網友回復：
嘗試這個
<div>
<section class="content container-fluid">
<form id="submitForm">
<fieldset>
<br>
<div class="form-group row mb-2">
<label for="userId" class="col-sm-1 col-form-label">User</label>
<div class="col-sm-6">
<select class="form-control" id="userId">
<option value="1">Alex</option>
<option value="39">Kent</option>
<option value="6">Nick</option>
</select>
</div>
<div class="col-sm-5 small">
If your name is not available, please contact the Officer.
</div>
</div>
<div class="form-group row mb-2">
<label for="purposeNames" class="col-sm-1 col-form-label">Purpose</label>
<div class="col-sm-6">
<input type="text" id="purposeNames" class="form-control" placeholder="Purpose" />
</div>
<div class="col-sm-5" style="padding-left: 18px">
<div class="row">
<div class="col-sm-12, small">
Feel free to select more than one purpose per ticket e.g. email instant messaging.
Such purpose combinations will only proportionally affect purpose statistics.
Please do not use online time that was initially requested for purposes of the category "Not affecting personal quota"
(e.g. chores) also for checking personal emails, instant messaging etc.
Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="userPassword" class="col-sm-1 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="userPassword" placeholder="Password">
</div>
<div class="col-sm-5 small" style="padding-left: 18px">
Please use combination of letter, symbol & number.
</div>
</div>
</fieldset>
</form>
</section>
</div>
uj5u.com熱心網友回復：
您可以將文本放在 div 中并添加 css 屬性 overflow: hidden
<div class="col-sm-5, small" style="padding-left: 18px">
<div class="sample">
Feel free to select more than one purpose per ticket e.g. email instant messaging.
Such purpose combinations will only proportionally affect purpose statistics.
Please do not use online time that was initially requested for purposes of the category "Not affecting personal quota"
(e.g. chores) also for checking personal emails, instant messaging etc.
Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.
</div>
</div>
CSS：
.sample
{
overflow: hidden;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/354754.html