他のスパンを移動するブートストラップラベル

Question

何かがInProcessであるときにラベルを使用しようとしていますが、移動する余地が十分あるにもかかわらず、ラベルがパネル内の別のスパンを移動します。 http://imgur.com/Q9VgJMs

それがあるべき方法：：それは今ではどのよう

http://imgur.com/5yXGGCs

ここではそのためのコードです。

    <div class="panel-body log-work-lot-container"> 
         <ul class="list-unstyled"> 
          <li class="log-work-item-lot" data-ng-click="vm.SetActiveBatch(batch);" data-ng-class="{'selected' : batch.IsActive}" 
           data-ng-repeat="batch in vm.Batches" data-ng-show="!batch.IsScrapped && !batch.IsCompleted"> 
           <div style="text-align:center;"> 
            <span class="pull-left">0000{{batch.Name}}</span> 
            <span class="pull-right label label-info" data-ng-show="batch.InProcess"> In Process </span> 
            <span style="">QTY {{batch.Quantity}}</span> 
           </div> 
          </li> 
         </ul> 
        </div> 

Answer 1

これはそれを行う必要があります。

.list-unstyled .pull-left { margin-right: -100%; } 
.list-unstyled .pull-right { margin-left: -100%; } 

が、これはそれを行うためのハックっぽい方法であり、彼らは1に収まらない場合は、あなたの右/左の要素が中心の内容と重複しますのでご注意ください行。非常に小さな画面で重複しないように、マークアップに基づいてyour fiddleを更新しました。それは完璧ではありませんが、それらをオーバーラップするよりも優れています:)。

Answer 2

ブートストラップグリッド構造を使用して、データを列形式で整理します。 例 - http://www.bootply.com/5FLFCdIny1

（たとえば上記のデバイスのすべての種類のカラム形式でデータを表示するであろう、*のみCOL-XS-を使用していますあなたは、画面の大きさに基づいて表示をカスタマイズすることができます。）