html - 如何在保持移动响应能力的同时改变 Bootstrap？

Question

我知道我们可以通过编写我们的类来改变 Bootstrap 默认类。但是当我这样做时，我失去了通过 Bootstrap 框架带来的移动响应能力。有没有一种方法可以更改默认的 Bootstrap 类并仍然保留 Bootstrap 的移动响应功能，或者我是否必须单独编写媒体查询以适应自定义类

例如这是通过 Bootstrap

.my-nav{
  box-sizing: border-box;
  background-color: cornflowerblue !important;
  height: 80px;
  border-radius: 0px !important;
}
.my-nav a{
  margin-left: 15% !important;
  margin-top:5%;
}
.my-nav ul{
  float: right;
  margin-right: 15%;
  margin-top: 1%;
}
.my-nav li{
  font-size: 15px;
  text-transform: uppercase;
}

<header>
  <nav class="navbar my-nav">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <img src="brand.png">
        </a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</header>

这是包含我的自定义类的工作表，用于更改默认的 Bootstrap 类。

如何在保持移动响应能力的同时改变 Bootstrap ??

Answer 1

您正在使用 float 和 bootstrap 来调整您的布局。这并不总是一件坏事，但当 Bootstrap 在同一元素上使用 float 时，结果可能不好。

Bootstrap 为您提供了一些预定义的类来帮助您。例如，要使菜单位于右侧而不是在菜单 ul 上使用 float:right;，请添加 class="navbar-right" 给它，这是它预定义的类。熟悉此类类(class)很有好处。

第二件事是使用媒体查询，这就是响应式设计的全部内容。使用 Bootstrap ，相同的 css 样式可能会在不同的屏幕尺寸下产生不同的结果，因此您需要在 css 中包含媒体查询。

.my-nav{
  box-sizing: border-box;
  background-color: cornflowerblue !important;
  height: 80px;
  border-radius: 0px !important;
}
.my-nav .navbar-header{
  height:80px;
}
.my-nav li{
  font-size: 15px;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<header>
    <nav class="nav navbar-default navbar my-nav">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img src="brand.png">
          </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
</header>