Question

使用Bootstrap，我想要具有200px宽的表单字段/输入，除非屏幕＆lt; 768px /在智能手机上查看，然后我希望表单字段为100％宽度。

<form>
  <div class="form-group responsive200">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email">
  </div>
</form>

我制作了这个CSS，但是当屏幕较小时，输入保持宽度：200px。

.responsive200 {
    width:200px;
}

@media screen and (min-width: 768px) {
    .responsive200 { width:100%; }
}

如果我的输入宽度为200px，除非屏幕＆lt; 768px，然后宽度：100％？

Answer 1

你有错误的方法。您的媒体查询将样式应用于宽度超过768px的任何内容。

默认情况下，Bootstrap的网格系统首先从移动（最小设备）开始，然后随着屏幕变宽而应用样式。

试试这个：

/* Extra small devices (phones, less than 768px) */
.responsive200 {
    width:100%;
}

/* Small devices (tablets, 768px and up) */  
@media screen and (min-width: 768px) {
    .responsive200 { width:200px; }
}

有关参考，请查看Bootstrap documentation。

Answer 2

如果您将@media条件更改为：

.responsive200 {
    width:200px;
}
@media screen and (max-width: 768px) {
    .responsive200 { width:100%; }
}

它应该适合你

Bootstrap输入固定px宽度除非小屏幕然后宽度100％

2 个答案: