Bootstrap 输入固定 px 宽度，除非小屏幕然后宽度 100%答案

【问题标题】：Bootstrap input fixed px width unless small screen then width 100%Bootstrap 输入固定 px 宽度，除非小屏幕然后宽度 100%
【发布时间】：2016-02-01 03:21:36
【问题描述】：

使用 Bootstrap，我希望表单域/输入宽度为 200 像素，除非屏幕

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

我做了这个 CSS，但是当屏幕很小时，输入保持 width:200px。

.responsive200 {
    width:200px;
}

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

我如何让我的输入是宽度：200 像素，除非屏幕

【问题讨论】：

将 min-width 更改为 max-width ... see if that does it
@zgood 我做了那个改变，但我的并没有像你的 jsfiddle 那样在我的 localhost 中跳转到 100% 的页面宽度。
它似乎在我链接的小提琴中工作。来回移动小提琴框架窗口，当框架宽于768时文本框为200px，小于768时为100%
"我制作了这个 CSS，但是当屏幕很小时，输入保持宽度：200px。" - 这就是你所期望的吧？您想在引导程序中实现相同的功能吗？看起来css按预期工作。
@AndrewKoper 尝试在屏幕较小时检查div.responsive200 并查看样式是否被覆盖。我怀疑@media 查询中的样式可能需要更具体。（即form .someParent .responsive200 { width: 100%; }。您也可以尝试在@media 样式上添加!important;

标签： css twitter-bootstrap

【解决方案1】：

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

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

它应该适合你

【讨论】：

其他程序员：在媒体查询规则之前定义固定宽度规则很重要。

【解决方案2】：

你搞错了。您的媒体查询将样式应用于宽度超过 768 像素的任何内容。

默认情况下，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。

【讨论】：