Bootstrap Center有兩個寬度有限的進度條嗎？

我試圖將兩個進度條居中放在HTML畫布元素上。Bootstrap Center有兩個寬度有限的進度條嗎？

我已經試過各種自舉類和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; 
}

來源

2017-01-18 RaSedg

這個問題似乎是在您設置：

.progress { 
    width: 300px !important; 
}

的!important標誌被覆蓋width:50%爲col-xs-6基於Bootstrap設置。

只需刪除該行似乎解決這個問題:)

我創建了一個小提琴證明這一點，可以發現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。

來源

2017-01-18 02:38:10

謝謝你的回覆！但是現在進度條居中了，我怎麼能限制它們的寬度，我是否需要在左邊和右邊添加額外的列來填充這個空間。 – RaSedg

我已經更新了我的答案，以顯示酒吧如何限制寬度。具有諷刺意味的是，它實際上意味着恢復到原來基本上在做的事情上，並簡單地改變HTML。希望這是你正在尋找的東西:) –

要解決我的問題，我必須禁用引導程序內的響應。然後我設置我的網格容器的寬度等於我的畫布元素的寬度。

Boostrap可能不是最好的選擇，因爲我不想要一個響應式網格，經驗教訓。

Diable bootstrap responsiveness

來源

2017-01-18 15:16:57 RaSedg

Bootstrap Center有兩個寬度有限的進度條嗎？

回答

相關問題