圖像類型彩色棒在左邊小屏幕上

Question

我有一個網站。 Please see this。它可以在大屏幕上正常工作，但是當我在移動設備上看到它時，顏色部分會粘在左側。請告訴我該怎麼辦？

Answer 1

這個下面這樣的HTML更換就能解決問題

<input class="form-control center-block" name="colorpicker" onchange="hello(colorpicker.value);" style="width: 50px;" type="color"> 

Answer 2

您輸入有一個類.form-control和bootstrap.css CSS屬性display:inline-block到.form-control僅在屏幕更大然後768px所以當你調整應用到小屏幕.form-control得到display:block因爲它發生只是添加這個自定義類給你輸入和這個CSS。

input.custom_class{ 
    display: inline-block !important; 
} 

Answer 3

您可以在響應添加此CSS畫布：

canvas { 
    border: 2px solid #c0c0c0; 
    float: left; 
    width: 100%; 
} 

Answer 4

刪除類=「形式的控制」，如果你不希望這樣的事情發生，並分別樣式。它的引導程序的斷點執行此操作。