ブートストラップ入力テキストボックスの隣にアスタリスクを配置する

Question

私はブートストラップグリッドシステムを使用していますが、私の入力ボックスの後ろに赤いアスタリスクを配置する方法を理解しようとしています。その入力ボックスを必要なものとして表示する。

私はブートストラップの鳥システムを理解することができません。私はラベルとしてそれを置いてみましたが、それはそれを上に置きます。スパンとしてそれを下に置きます。これを入力のすぐ後ろにどのように置くことができますか？

<div id="propertyidsearch"> 
     <div class="col-lg-3 required"> 
      <input type="text" name="searchValue" maxlength="2000" size="40" value="" class="form-control input-sm"> 
     </div> 
     <div class="col-lg-3"> 
      <button type="button" class="btn-u btn-default margin-bottom-10" id="name" name="name">OWNER NAME</button> 
     </div> 
     <div class="col-lg-3"> 
      <button type="button" class="btn-u btn-default margin-bottom-10" id="location" name="location">PROPERTY ADDRESS</button> 
     </div> 
     <div class="col-lg-3"> 
      <button type="button" class="btn-u btn-default margin-bottom-10" id="billingAddress" name="billingAddress">BILLING ADDRESS</button> 
     </div> 
    </div> 

.required:after{ 
    content:"*"; 
    color:red; 
} 

Answer 1

Twitterのブートストラップでは、グリッド・システムは、ページの幅全体に対して一度だけ動作しますが、また、個々のcolブロック、すなわち内だけではありません。 col-lg-3を定義すると、そのブロック内に12個の小さな部分に分割するブロックが追加されます（12 col）。あなたが好きな方法、つまり8-4を分割する（下の例のように - 全ページビューでスニペットを開くことをお勧めします）、または他の方法を使用してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div id="propertyidsearch"> 
 
     <div class="col-lg-3"> 
 
     \t <div class="col-lg-8"> 
 
      \t <input type="text" name="searchValue" maxlength="2000" size="40" value="" class="form-control input-sm"> 
 
      \t </div> 
 
     \t <div class="col-lg-4"> 
 
      \t <span style="color:red;">*</span> 
 
      \t </div> 
 
     </div> 
 
     <div class="col-lg-3"> 
 
      <button type="button" class="btn-u btn-default margin-bottom-10" id="name" name="name">OWNER NAME</button> 
 
     </div> 
 
     <div class="col-lg-3"> 
 
      <button type="button" class="btn-u btn-default margin-bottom-10" id="location" name="location">PROPERTY ADDRESS</button> 
 
     </div> 
 
     <div class="col-lg-3"> 
 
      <button type="button" class="btn-u btn-default margin-bottom-10" id="billingAddress" name="billingAddress">BILLING ADDRESS</button> 
 
     </div> 
 
    </div>

あなたはここでそれで遊ぶことができます：http://www.bootply.com/eV4qRJT14V