Question

我只是想让我的主题更具响应性，我选择尝试Bootstrap，但我对Navbar有一些问题。当我为桌面定制它时，一切看起来都没问题，但是，当我将它调整到移动版本时出现了一些“问题”，我无法找到如何更改＆lt; li>或者＆lt; a＆gt;仅在移动设备中切换时标记。最重要的是试图让Mobile菜单变得更好：）

所以我拍摄了一些照片，以便于解释：

屏幕截图1：原始桌面/移动

屏幕截图2：自定义，中间一个是我的问题。

＆安培;我的代码......谢谢大家:)

@bgDefault      : #e0345b;
@bgHighlight    : #bd3656;
@colDefault     : #ecf0f1;
@colHighlight   : #ffffff;
@height         : 130px;
@navlinksize    : 1.5em;
@dropDown       : false;
@effect         : all 0.3s ease;

body {
    font-family: Gisha;	  
    
}
.ddm() when (@dropDown) {
  > li > .dropdown-menu {
      background-color: @bgDefault;
      > li {
        > a {
          color: @colDefault;
          &:hover,  &:focus {
            color: @colHighlight;
            background-color: @bgHighlight; }}
        > .divider {
          background-color: @bgHighlight;}}}
  .open .dropdown-menu > .active {
    > a, > a:hover, > a:focus {
      color: @colHighlight;
      background-color: @bgHighlight; }}}
.navbar-default {
  background-color: @bgDefault;
  border-color: @bgHighlight;
  min-height: @height;

  .navbar-brand {
    color: @colDefault;
    padding: 5px;
    > img {
     width: 120px;

    }
    &:hover, &:focus {
      color: @colHighlight; }}
  .navbar-text {
    color: @colDefault; }
  .navbar-nav {
    > li {
    
      > a {
        display:table-cell;vertical-align:middle;
        color: @colDefault;
        height: @height;
        font-size: @navlinksize;
        font-weight: bold;
        transition: @effect;
        &:hover,  &:focus {
          color: @colHighlight; 
          background-color: @bgHighlight;
          transition: @effect;
          
         }
          }}
    .ddm;
    > .active {
      > a, > a:hover, > a:focus {
        color: @colHighlight;
        background-color: @bgHighlight; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: @colHighlight;
        background-color: @bgHighlight; }}}
  .navbar-toggle {
    border-color: @bgHighlight;
    margin: 50px;
    &:hover, &:focus {
      background-color: @bgHighlight; }
    .icon-bar {
      background-color: @colDefault; }}
  .navbar-collapse,
  .navbar-form {
    border-color: @colDefault; }
  .navbar-link {
    color: @colDefault;
    
    &:hover {
      color: @colHighlight; }}}
@media (max-width: 767px) {
    
  .navbar-default .navbar-nav .open .dropdown-menu {

    > li > a {
      
      color: @colDefault;
      &:hover, &:focus {
        color: @colHighlight; }}
    > .active {
      > a, > a:hover, > a:focus {
        color: @colHighlight;
        background-color: @bgHighlight; }}}
}

<!DOCTYPE html>
<html lang="he">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<link rel="stylesheet/less" type="text/css" href="css/style.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
  </head>
  <body>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header navbar-right">
      <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="images/logo.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><a href="#">מולטיפוקל <span class="sr-only">(current)</span></a></li>
        <li><a href="#">צור קשר</a></li>
        <li><a href="#">משקפי שמש</a></li>
        <li><a href="#">עדשות מגע</a></li>
        <li><a href="#">תמיסות</a></li>
        <li><a href="#">אודות</a></li>

      </ul>

      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

对于@media (max-width: 767px)，您必须增加a的字体大小，将其display更改为block并使用text-align: center。

编辑：如果yoiu将你的样式贴在bootstrap.css下面，你必须使用更具体的规则或相同的特性来覆盖bootstrap的样式。试试：

.nav > li > a {
  text-align: center;
  font-size: 36px;
}

在切换到移动设备时尝试自定义我的Bootstap导航栏

1 个答案: