引導 - 如何保證空格上最左邊和最右邊移動

誰能告訴我如何保證我得到當頁面在手機上觀看的左側和右側的空白/保證金？引導 - 如何保證空格上最左邊和最右邊移動

我的CSS是：

#maxCostSlider { 
    max-width:304px; 
    width:304px; 
    padding:0px; 
    margin-left:-6px; 
} 
@media (max-width: 480px) { 
    #maxCostSlider,#sliderScale { 
     margin-left: 20px; 
     margin-right: 20px; 
    } 
}

HTML是：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-offset-4 col-md-4"> 
     <img id="sliderScale" src="/assets/img/price slider 1.png" alt="" class="img-responsive" /> 
    </div> 
    </div> 
    <div class="row text-center"> 
    <div class="col-md-offset-4 col-md-4"> 
     <input id="maxCost" data-slider-id='maxCostSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="40" /> 
    </div> 
    </div> 
</div>

這一切看起來臺式機和iPad，但在iPhone上觀看時，引導滑塊控件橫跨整個寬度上良好的設備。我想確保兩行的任何一邊至少有20px的邊距。理想情況下，引導滑塊可以縮放以適合。

來源

2014-11-14 Bill Noble

你可以試試看它如何在小型顯示器上使用'container'類而不是'container-fluid'。 – muthan 2014-11-14 14:12:57

@muthan更改容器將無濟於事。除了移動寬度以外，流體總是流向邊緣。 – DavidG 2014-11-14 14:13:44

您正在使用哪個滑塊組件？ – DavidG 2014-11-14 14:15:25

很難說沒有知道你正在使用的精確滑塊組件，但增加這對你的CSS應該工作：

#maxCostSlider { 
    margin-left: 20px; 
    margin-right: 20px; 
}

不過，如果你只是想，要在移動寬度發生，在媒體把它包查詢：

@media (max-width: 480px) { 
    #maxCostSlider { 
     margin-left: 20px; 
     margin-right: 20px; 
    } 
}

來源

2014-11-14 14:19:48 DavidG

保證金左側正在工作，但保證金權利似乎沒有效果。當我縮小桌面窗口時，我會跳到滑塊窗口小部件和顯示比例的圖像的對齊位置。我想知道如果問題是與滑塊小部件（來自：https：//github.com/seiyria/bootstrap-slider）？ – 2014-11-14 15:07:56

我做了一個小小的調整，CSS現在應該適用於你的滑塊而不是輸入。 – DavidG 2014-11-14 15:21:08

我現在有以下CSS但仍與右側沒有喜悅：\t #maxCostSlider { \t \t最大寬度：304px; \t \t width：304px; \t \t padding：0px; \t \t margin-left：-6px; \t} \t @media（max-width：480px）{ ＃maxCostSlider，＃sliderScale {margin：left-left：20px; margin-right：20px; } \t} – 2014-11-14 15:39:34

對於小型設備（sm）和超小型設備（xs），您可以分別打電話給他們。

<div class="col-sm-offset-1 col-xs-offset-1 col-md-offset-4 col-md-4"></div>

另一種方式，你可以通過CSS來做到這一點。

@media (min-width: 240px) and (max-width: 480px) { 
    #max-cost { 
     padding-left: 20px; 
     padding-right: 20px; 
     } 
}

來源

2014-11-14 14:31:22

引導 - 如何保證空格上最左邊和最右邊移動

回答

相關問題