Bootstrap - 根据屏幕大小使用不同的类

Question

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

我想form-control只在screenize时添加类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 -->