Пункт меню не может перемещаться по центру - PullRequest
Новая
       5

Пункт меню не может перемещаться по центру

0 голосов
/ 07 января 2020

Я перепробовал все, но не смог вынести этот пункт меню в центр. Вот мой код: 

    <div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
      <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
      <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Network</a>
      <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">End User</a>
      <a class="nav-item nav-link" id="nav-x1-tab" data-toggle="tab" href="#nav-x1" role="tab" aria-controls="nav-x1" aria-selected="false">Service Desk</a>
    </div>
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
      <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
      <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">ccccccccccccccccccccccccccccccccc</div>
      <div class="tab-pane fade" id="nav-x1" role="tabpanel" aria-labelledby="nav-x1-tab">dddddddddddddddddddddddddd</div>
     </div>

enter image description here

Ответы [ 3 ]

2 голосов
/ 07 января 2020

Для этого вы можете использовать d-flex justify-content-center bootstrap класс. 

<div class="d-flex justify-content-center">
    <div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
      <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
      <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Network</a>
      <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">End User</a>
      <a class="nav-item nav-link" id="nav-x1-tab" data-toggle="tab" href="#nav-x1" role="tab" aria-controls="nav-x1" aria-selected="false">Service Desk</a>
    </div>
</div>


<div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
      <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
      <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">ccccccccccccccccccccccccccccccccc</div>
      <div class="tab-pane fade" id="nav-x1" role="tabpanel" aria-labelledby="nav-x1-tab">dddddddddddddddddddddddddd</div>
</div>
1 голос
/ 07 января 2020

Вы можете использовать <center></center> для центрирования панели навигации 

<center>
    <div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Network</a>
        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">End User</a>
        <a class="nav-item nav-link" id="nav-x1-tab" data-toggle="tab" href="#nav-x1" role="tab" aria-controls="nav-x1" aria-selected="false">Service Desk</a>
    </div>
</center>
0 голосов
/ 07 января 2020

Сделать контейнер заголовка в качестве отображения: блок и отображение каждого заголовка: inline-block: 

.nav  {
  display: block;
  text-align: center;
}

.nav > a {
  display: inline-block;
}
 <div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
      <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
      <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Network</a>
      <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">End User</a>
      <a class="nav-item nav-link" id="nav-x1-tab" data-toggle="tab" href="#nav-x1" role="tab" aria-controls="nav-x1" aria-selected="false">Service Desk</a>
    </div>
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
      <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
      <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">ccccccccccccccccccccccccccccccccc</div>
      <div class="tab-pane fade" id="nav-x1" role="tabpanel" aria-labelledby="nav-x1-tab">dddddddddddddddddddddddddd</div>
     </div>
...