如何使用引導程序設置不同屏幕尺寸的列類

除了小屏幕，我希望文本和數字並排，但不會發生。如何使用引導程序設置不同屏幕尺寸的列類

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-sm-3 col-md-3 col-lg-3"> 
    <label>No. Of Submissions</label> 
    </div> 
    <div class="col-sm-9 col-md-9 col-lg-9"> 
    23876 
    </div> 
</div>

對於1280 X 600 - 他們是並排的。
對於980 X 1280 - 它們低於另一個。
對於800 X 1280 - 它們低於另一個。
對於768 X 1024 - 它們是一個在另一個之下。
對於360 X 640-他們是一個在另一個之下。
對於320 X 500 - 它們低於另一個。

即使對於小屏幕（320,360）也是並排的，這會很好，但並不重要。我只關心中大屏幕。

https://jsfiddle.net/as39d9gk/

來源

2016-09-05 Qwerty

您可以添加一個mcve：http：// stackoverflow .COM /幫助/ MCVE？所提供的代碼應該在所有屏幕尺寸上並排放置。 –

我做了一個小提琴。你能檢查一下嗎？ – Qwerty

小提琴中的代碼與您的問題中的代碼不同。它似乎在那裏找到工作。 –

嘗試此

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-sm-12 col-md-3 col-lg-3"> 
    <label>No. Of Submissions</label> 
    </div> 
    <div class="col-sm-12 col-md-9 col-lg-9"> 
    23876 
    </div> 
</div>

SM-12裝置DIV具有寬度100％小屏幕上，MD-3具有介質屏幕上25％的寬度。和LG-3是指大屏幕

來源

2016-09-05 09:12:05

爲什麼MD - 12，我也希望他們在中等屏幕旁邊。無論如何，它沒有工作。沒有什麼比以前改變了。我正在使用respnsive功能檢查firefox（ctrl + shift + M） – Qwerty

25％，與給定的代碼可以通過這個代碼

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-5 col-md-3 col-lg-3"> 
      <label>No. Of Submissions</label> 
     </div> 
     <div class="col-xs-12 col-sm-8 col-md-9 col-lg-9"> 
      23876 
     </div> 
    </div>

按照您的要求，你要

爲980 X 1280來實現 - 它們是一個在另一個之下。

對於800 X 1280 - 它們低於另一個。

對於768 X 1024 - 他們是一個在另一個之下。它不是一個完美的代碼，但它符合你的要求，我使用col-sm-5和col-sm-8，所以當它們加起來成爲13時，它會自動進入下一行，但它不是一個好方法，但可以做爲你工作，你可以簡單地將margin-left添加到第二個div並使用col-sm-4 col-sm-8和col-sm-8添加margin-left

來源

2016-09-06 04:56:59

如何使用引導程序設置不同屏幕尺寸的列類

回答

相關問題