Question

我想将标签列表与中心对齐。如下图所示，它向左移动。 Bootstrap类 center-block 已经包含但仍然不起作用。请帮我！！！ register this Compiler pass

这是我的代码HTML： -

<ul class="nav nav-tabs center-block" role="tablist">
                        <!-- Schedule  -->
                        <li role="presentation" class="active">
                            <a href="#" aria-controls="dem" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                                <span>Schedule</span>
                            </a>
                        </li>
                        <!-- Resource  -->
                        <li role="presentation">
                            <a href="#" aria-controls="resource" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                                <span>Resource</span>
                            </a>
                        </li>
                        <!-- Automation  -->
                        <li role="presentation">
                            <a href="#" aria-controls="automation" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                                <span>Automation</span>
                            </a>
                        </li>
                        <!-- Customize -->
                        <li role="presentation">
                            <a href="#" aria-controls="customize" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                                <span>Customize</span>
                            </a>
                        </li>
                    </ul>

这里是我的CSS -

.ilpFeatureSection .nav-tabs {
    border-bottom: none
}

@media(min-width:480px) {
    .ilpFeatureSection .nav-tabs {
        width: 390px
    }
}

@media(min-width:768px) {
    .ilpFeatureSection .nav-tabs {
        width: 600px
    }
}

@media(min-width:992px) {
    .ilpFeatureSection .nav-tabs {
        width: 800px
    }
}

@media(min-width:1200px) {
    .ilpFeatureSection .nav-tabs {
        width: 1000px
    }
}

谢谢：）

Answer 1

使用nav-justified并从导航栏中删除center-block nav-justified是一个预先编写的引导程序类，用于集中导航。它只是通过.nav-tabs{width:100%}

来完成@SankarRaj所需要的

Answer 2

我相信这是因为Bootstrap在nav-tabs项目上使用“float：left”。您需要在列表项

上设置“float：none”和“display：inline-block”

Answer 3

添加容器并进行导航对齐。然后在整页中尝试

.ilpFeatureSection .nav-tabs {
    border-bottom: none
}

@media(min-width:320px) {
    .nav-tabs.nav-justified>li{
        width:25% !important;
      float:left !important;
     
   
    }
 
}

@media(min-width:480px) {
    .nav-tabs.nav-justified>li{
        width:25% !important;
      float:left !important;
     
   
    }
 
}

@media(min-width:768px) {
    .nav-tabs.nav-justified>li {
      width:1% !important;
      float:none !important;
    }
}

@media(min-width:992px) {
    .nav-tabs.nav-justified>li {
       width:1% !important; 
      float:none !important;
    }
}

@media(min-width:1200px) {
    .nav-tabs.nav-justified>li {
       width:1% !important; 
      float:none !important;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<ul class="nav nav-tabs nav-justified" role="tablist">
                        <!-- Schedule  -->
                        <li role="presentation" class="active">
                            <a href="#" aria-controls="dem" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                              <br/>
                                <span>Schedule</span>
                              <br/>
                            </a>
                        </li>
                        <!-- Resource  -->
                        <li role="presentation">
                            <a href="#" aria-controls="resource" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                               <br/> <span>Resource</span>
                            </a>
                        </li>
                        <!-- Automation  -->
                        <li role="presentation">
                            <a href="#" aria-controls="automation" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                               <br/> <span>Automation</span>
                            </a>
                        </li>
                        <!-- Customize -->
                        <li role="presentation">
                            <a href="#" aria-controls="customize" role="tab" data-toggle="tab">
                                <img alt="icon" src="#" class="iconDark">
                                <img alt="icon" src="#" class="iconWhite">
                                <br/><span>Customize</span>
                            </a>
                        </li>
                    </ul>
   </div>
  </body>
  </html>

Answer 4

试试这个

<强> CSS

.ilpFeatureSection .nav-tabs {
   border-bottom: none
   margin: auto;
 }

Bootstrap的选项卡未与中心对齐

4 个答案: