ブートストラップと要素の整列

Question

以下のスクリーンショットに示すように、次の入力フィールドのテキストラベルに合わせて "Format Example"文字列を表示するには、以下のマークアップを使用します。現在のところ、正当化されているように動作しています。私はBootstrapでAngularJSを使用しているので、私は静的な幅のようなものを使いたくないので、これをもっと動的にするにはどうすればいいですか？

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<fieldset style="display:inline-block"> 
 

 
    <div style="float:left"> 
 
    <legend>Copy</legend> 
 
    <div style="float:right"> 
 
     <u>Format Example</u> 
 
    </div> 
 
    <br/> 
 
    <br/> 
 
    <div> 
 
     <input type="text" /> Format Unknown 
 
    </div> 
 
    <br/> 
 
    <div> 
 
     <input type="text" /> X.X.X 
 
    </div> 
 
    <br/> 
 
    <div> 
 
     <input type="text" /> YYYYMMDD-HHMM 
 
    </div> 
 
    <br/> 
 
    <div> 
 
     <input type="text" /> X.X-SNAPSHOT 
 
    </div> 
 
    <br/> 
 
    <div> 
 
     <input type="text" /> YYYY-MM-DD HH:MM:SS 
 
    </div> 
 
    </div> 
 
</fieldset>

Answer 1

あなただけの列と行を使用してグリッドにそれを必要とするでしょう。これは基本的な例であり、必要に応じてmd,sm、xsのサイジングを追加する必要があります。スニペットを全画面でプレビューします。

また、区切りを使用して行を配置しないでください。代わりにcssを使ってください。

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<fieldset style="display:inline-block"> 
 

 
    <div style="float:left"> 
 
    <legend>Copy</legend> 
 
    <div class="row"> 
 
     <div class="col-lg-6 col-lg-offset-6"><u>Format Example</u></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-6"><input type="text" /></div> 
 
     <div class="col-lg-6">Format Unknown</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-6"><input type="text" /></div> 
 
     <div class="col-lg-6">X.X.X</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-6"><input type="text" /></div> 
 
     <div class="col-lg-6">YYYYMMDD-HHMM</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-6"><input type="text" /></div> 
 
     <div class="col-lg-6">X.X-SNAPSHOT</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-6"><input type="text" /></div> 
 
     <div class="col-lg-6">YYYY-MM-DD HH:MM:SS</div> 
 
    </div> 
 
    </div> 
 
</fieldset>