Вкладки вкладки Bootstrap не совпадают с центром

Я хочу выровнять список вкладок в центр. Как вы можете видеть на изображении ниже, он сдвигается влево. Bootstrap класс центральный блок уже включен, но все же он не работает. Пожалуйста помогите!!! Вкладки вкладки Bootstrap не совпадают с центром

Вот мой 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 
    } 
}

Спасибо :)

источник

2016-07-27 Yashwardhan Pauranik

Пожалуйста, создайте jsFiddle. –

Попробуйте использовать '.nav-tabs {width: 100%}' – Sankar

nope @SankarRaj это не работает. –

Я считаю, что это происходит потому, что Bootstrap использует «поплавок: слева "на элементах nav-tabs. Вам нужно будет установить «float: none» и «display: inline-block» в элементе списка

источник

2016-07-27 14:02:32

Не работает –

Используйте nav-justified и удалите center-block с вашего навигатора.
nav-justified - это предварительно загруженный класс начальной загрузки, чтобы центрировать ваш навигатор. Он просто делает то, что хотел @SankarRaj тоже с .nav-tabs{width:100%}

источник

2016-07-27 14:02:39 DestinatioN

@DestinationN Я хочу, чтобы блоки вкладок соединялись, как видно на изображении. Решением, которое вы дали, является выравнивание центра, но не в соединении. –

@DestinationN Как и когда я минимизирую свой экран, он идет вертикально, чего я не хочу. Пожалуйста помоги!!! –

Добавить контейнер и сделать nav-justified. Тогда попробуйте это в полной странице

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

источник

2016-07-27 14:26:49

код обновлен –

Попробуйте этот

CSS

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

источник

2016-07-27 14:37:50

Вкладки вкладки Bootstrap не совпадают с центром

ответ

Смежные вопросы