ブートストラップ幅が制限された2つのプログレスバー？

Question

私は、HTMLキャンバス要素の上に2つのプログレスバーを中央に配置しようとしています。

私は、さまざまなブートストラップクラス、およびCSSの変更を試みたと私はちょうど私がちょうど左のバーのマージンに追加しない限り、それを動作させる傾けます。どんな助けもありがとうございます。

HTML

<div class="container"> 
    <div class="row"> 
     <div id="scoreBoardLeft" class="col-xs-6 text-right"><a href="#" id="leftScore" class="btn btn-default"></a></div> 
     <div id ="scoreBoardRight" class="col-xs-6"><a href="#" id="rightScore" class="btn btn-default"></a></div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-6 progress progress-striped active"> 
      <div class="progress-bar" style="width: 45%"></div> 
     </div> 
     <div class="col-xs-6 progress progress-striped active"> 
      <div class="progress-bar" style="width: 45%"></div> 
     </div> 
    </div> 
    <div class="row"> 
     <div id="pong" class="col-xs-12 text-center"></div> 
    </div> 
</div> 

CSS

* { 
    padding: 0; margin: 0; 
} 

canvas { 
    background: #eee; 
    display: block; 
    margin: 0 auto; 
} 

#scoreBoardLeft { 
    padding-right: 1px; 
} 

#scoreBoardRight { 
    padding-left: 1px; 
} 

#leftScore { 
    width: 35px !important; 
} 

#rightScore { 
    width: 35px !important; 
} 


.progress { 
    margin-bottom: 1px !important; 
    margin-left: auto !important; 
    margin-right: auto !important; 
    height: 10px !important; 
    width: 300px !important; 
} 

Answer 1

問題が設定したものであるように思わ：

.progress { 
    width: 300px !important; 
} 

!importantフラグは、ブートストラップによって設定されたcol-xs-6ためwidth:50%を上書きしています。単純にこの行を削除

は、この問題を解決するよう:)

私はhere見つけることができます。これを実証フィドルを作成しました。

希望すると便利です。

編集幅を制限するには：

問題をあなたの現在のマークアップと幅を制限するには、あなたは、次の要素をプッシュするだろうブートストラップの列と同じクラスにマージンを設定する必要があるということですあなたの現在のHTMLマークアップとの行。

私は交換をお勧めしたい：

<div class="col-xs-6 progress progress-striped active"> 
    <div class="progress-bar" style="width: 45%"></div> 
</div> 

で：あなたがしようとしていたとして

<div class="col-xs-6"> 
    <div class="progress progress-striped active"> 
     <div class="progress-bar" style="width: 45%"></div> 
    </div> 
</div> 

この新しいdiv要素に追加し、上記のような構造を変更することにより、あなたは.progressのwidthを修正することができます最初はやりたいことがあり、それは望ましい効果があります:)

私は新しいフィドルを作成しました。これを変更し、バーの幅を30％あなたが探していると思う変化を反映するために：

新しいフィドルはhereを見つけることができます。

Answer 2

私の問題を解決するために、私はブートストラップ内で応答性を無効にしなければなりませんでした。グリッドコンテナの幅をキャンバス要素の幅と同じに設定します。

私はレスポンシブなグリッドがほしくないので、Boostrapはおそらく最良の選択ではありませんでした。

Diable bootstrap responsiveness