图像类型颜色粘在小屏幕上

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中，display:inline-block到.form-control的css属性仅应用于大于768px的屏幕上，因此当您调整为小型时屏幕.form-control获取display:block因为它正在发生，只需将一个自定义类添加到您的输入和此css。

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

Answer 3

您可以在响应中添加此css for canvas：

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

Answer 4

删除class =＆＃34; form-control＆＃34;如果你不希望这种情况发生并单独设计它们。它的bootstrap的断点做到了这一点。