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是另一种通过基于窗口宽度添加/删除类来实现此目的的方法。见Docs。

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

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.*/}

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

5 个答案: