Как разместить вкладки начальной загрузки в div?

Question

Я пытался понять это так долго, и я, наконец, сдался ... Я уже определил div, и я бы хотел сосредоточить на нем несколько вкладок, но ничего не работает. Какие-либо предложения?

HTML:

<section class="area"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <ul class="nav nav-tabs"> 
        <li class="active"><a data-toggle="tab" href="#tab1">TAB 1</a></li> 
        <li><a data-toggle="tab" href="#tab2">TAB 2</a></li> 
        <li><a data-toggle="tab" href="#tab3">TAB 3</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</section> 

CSS:

.area{ 
    border: 2px solid #9A9A9A; 
    border-radius: 3px; 
    background-color: #FFFFFF; 
    height: 70%; 
    width: 75%; 
    margin: auto; 
    margin-bottom: 20px; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

.nav-tabs > li { 
    float: none; 
    display: inline-block; 
    zoom: 1; 
} 

.nav-tabs { 
    text-align: center; 
} 

Спасибо заранее.

Answer 1

Укажите родительский класс перед загрузкой встроенных классов. Пусть b ваш файл css не переопределяет загрузочный файл css.

.area .nav-tabs > li { 
    float: none; 
    display: inline-block; 
    zoom: 1; 
} 

.area .nav-tabs { 
    text-align: center; 
} 

Answer 2

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

  <ul class="nav nav-tabs"> 
       <li class="active"><a data-toggle="tab" href="#tab1"> 
        <center>TAB 1</center> 
        </a></li> 
       <li><a data-toggle="tab" href="#tab2"><center>TAB 2</center></a></li> 
       <li><a data-toggle="tab" href="#tab3"><center>TAB 3</center></a></li> 
      </ul> 

Answer 3

Для того, чтобы централизованно выравнивать вкладки, нужно добавить следующее:

.area .nav { 
    text-align:center; 
} 

.area .nav-tabs>li { 
    float: none; 
    display:inline-block; 
} 

https://jsfiddle.net/tghLqu24/2/ - скрипка создана для вас, чтобы увидеть его работу.

Answer 4

Существует проблема с вашим кодом, вы установили ширину области 75% ширина контейнера 1170px, контейнер вытащить area DIV, то почему вы получили эту проблему, я просто положить area Div в container, пожалуйста, свяжитесь с фрагмент. Я решил вашу проблему.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<style> 
 
.area{ 
 
    border: 2px solid #9A9A9A; 
 
    border-radius: 3px; 
 
    background-color: #FFFFFF; 
 
    height: 70%; 
 
    width: 100%; 
 
    margin: auto; 
 
    margin-bottom: 20px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    text-align:center; 
 
} 
 

 
.nav-tabs > li { 
 
    float: none; 
 
    display: inline-block !important; 
 
    zoom: 1; 
 
} 
 

 
.nav-tabs { 
 
    text-align: center; 
 
} 
 
</style> 
 

 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
      <div class="area"> 
 
       <ul class="nav nav-tabs"> 
 
        <li class="active"><a data-toggle="tab" href="#tab1">TAB 1</a></li> 
 
        <li><a data-toggle="tab" href="#tab2">TAB 2</a></li> 
 
        <li><a data-toggle="tab" href="#tab3">TAB 3</a></li> 
 
       </ul> 
 
      </div>  
 
      </div> 
 
     </div> 
 
    </div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>