Question

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

例如，这是通过Bootstrap

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

Answer 1

您正在使用float和bootstrap来调整布局。它并不总是坏事，但是当引导程序在同一个元素上使用float并且结果可能不太好时。

Bootstrap为您提供了一些预定义的类来帮助您。例如，要将菜单放在右侧而不是使用菜单float:right;上的ul，请向其添加class="navbar-right"，这是预定义的类。熟悉这些课程是很好的。

第二件事是使用media queries，这就是响应式设计的全部内容。使用bootstrap相同的css样式可能会在不同的屏幕大小中产生不同的结果，因此您需要在css中涉及媒体查询。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: