Bootstrap - 根据屏幕尺寸使用不同的类

Question

<input type="submit" class="form-control">

我只想在屏幕尺寸为

form-control

时添加

xs

类。现在

form-control

已添加到所有屏幕尺寸中。我怎样才能使

form-control

类仅在屏幕尺寸为

xs

时添加？

Answer 1

您可以使用两个不同的输入，如下所示：

<input type="submit" class="form-control hidden-lg hidden-md hidden-sm">
<input type="submit" class="hidden-xs">

当表单控件不是 xs 时，这将隐藏表单控件。

Answer 2

您可以使用@media http://www.w3schools.com/cssref/css3_pr_mediaquery.asp 例如，当屏幕尺寸小于 768 时隐藏侧边栏 id 标记的 div： @media（这是一些真正的价值......）

@media (max-width: 768px) {
   #sidebar {
      display: none;
  }
}

Answer 3

jQuery 是另一种方法，通过根据窗口宽度添加/删除类来实现此目的。请参阅文档。

*请参阅全屏工作示例，然后调整大小以查看更改。

function checkWidth(init) {

  if ($(window).width() < 480) {
    $('input').addClass('form-control');
  } else {
    if (!init) {
      $('input').removeClass('form-control');
    }
  }
}

$(document).ready(function() {
  checkWidth(true);

  $(window).resize(function() {
    checkWidth(false);
  });
});

body,
html {
  padding-top: 40px;
  padding-bottom: 40px;
}
#loginForm {
  max-width: 500px;
  padding: 15px;
  margin: 0 auto;
  background: #ddd;
}
@media (max-width: 480px) {
  #loginForm {
    background-color: red;
    color: white;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form id="loginForm">
    <div class="form-group">
      <label for="email">Email Address</label>
      <input type="email" id="email" name="email" placeholder="Email address" />
    </div>
    <div class="form-group">
      <label for="pw">Password</label>
      <input type="password" id="pw" name="pw" placeholder="Password" />
    </div>
    <div class="form-group">
      <input type="submit">
    </div>
  </form>
</div>
<!-- /container -->

Answer 4

Bootstrap V4 中添加了响应式文本对齐方式：

https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment

对于左对齐、右对齐和居中对齐，可以使用与网格系统相同的视口宽度断点的响应类。

<p class="text-xs-center">Center aligned text on all viewport sizes.</p>

已复制。

Answer 5

您应该同时使用 .xs 和 .form-control 类，如下所示：

.form-control.xs {/*Write your declerations.*/}

Answer 6

您可以使用 CSS 中的媒体查询来实现此目的。假设您使用 Bootstrap，您可以使用 col-xs 类来定位超小屏幕。这是一个例子：

<input type="submit" class="form-control hidden-xs">

在此示例中，hidden-xs 类将隐藏大于超小屏幕上的元素。如果您只想在超小屏幕上添加表单控件类，则可以使用实用程序类的组合。请注意，hidden-xs 在 Bootstrap 3 中已弃用，并在 Bootstrap 4 中被删除。如果您使用 Bootstrap 4 或更高版本，您可能需要使用不同的实用程序类来根据屏幕尺寸隐藏/显示元素。

<input type="submit" class="form-control d-block d-sm-none">