Центрирование кнопок на панели навигации в загрузочном блоке

Я пытаюсь понять, как работать с веб-дизайном, и я не мог понять, как сделать кнопки навигации в моем проекте центрированными. Я хотел бы, чтобы кнопки от Home to Page 3 были сосредоточены и задавались вопросом, был ли простой способ сделать это только в HTML-файле без необходимости использования отдельного класса CSS. Центрирование кнопок на панели навигации в загрузочном блоке

<!DOCTYPE html> 
<html lang="en"> 
    <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"> 

    <!-- 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.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Website Name</a> 
    </div> 
    <div> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

источник

2015-11-12 btrballin

Почти невозможно дать ответ без фактического кода. Вы должны опубликовать код HTML и CSS. – morgul

Извините. Я добавил его сейчас. – btrballin

сделать некоторые изменения в Bootstrap.CSS Может быть, как это ...

.nav navbar-nav 
{ 
    position: absolute; 
    width: 100%; 
    left: 0; 
    text-align: center; 
    margin: auto; 
}

Проверить здесь =>bootply

источник

2015-11-12 03:30:20 Pirson

Привет, в вашем предварительном просмотре у вас есть кнопка главной страницы, а остальные слева и справа. Я хотел, чтобы кнопка домашней страницы была слева, а остальные кнопки были центрированы. – btrballin

превью только образец. Я думаю, вы можете внести некоторые изменения в bootstrap.css. Найдите свой класс .nav navbar-default и добавьте значение text-align. text-align: center ;. Я думаю, это может сработать :) – Pirson

Используя этот CSS получите вашу навигационную кнопку в центре должность.

navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
} 

.navbar .navbar-collapse { 
    text-align: center; 
}

DEMO

источник

2015-11-12 04:26:01 Fiido93

Единственный способ вы можете сделать это, регулируя некоторые свойства CSS. В основном удалить float из navbar-nav и центрировать текст. Но если вы действительно хотите, чтобы они были центрированы, вы должны учитывать класс navbar-brand, назначив ему ширину и добавив отрицательный запас, равный половине этой ширины, к navbar-nav.

См. Рабочие примеры фрагментов.

@media (min-width: 768px) { 
 
    .navbar.navbar-default { 
 
    height: 50px; 
 
    } 
 
    .navbar.navbar-default .container-fluid, 
 
    .navbar.navbar-default .container { 
 
    text-align: center; 
 
    } 
 
    .navbar.navbar-default .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
    margin-left: -75px; 
 
    } 
 
    .navbar.navbar-default .navbar-brand { 
 
    width: 150px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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="#">Website Name</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-nav"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">Page 1</a> 
 

 
     </li> 
 
     <li><a href="#">Page 2</a> 
 

 
     </li> 
 
     <li><a href="#">Page 3</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Мобильный центр

.navbar.navbar-default .container-fluid, 
 
.navbar.navbar-default .container { 
 
    text-align: center; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar.navbar-default { 
 
    height: 50px; 
 
    } 
 
    .navbar.navbar-default .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
    margin-left: -75px; 
 
    } 
 
    .navbar.navbar-default .navbar-brand { 
 
    width: 150px; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar-default .navbar-brand.navbar-brand-centered { 
 
    position: absolute; 
 
    left: 50%; 
 
    display: block; 
 
    width: 150px; 
 
    text-align: center; 
 
    top: 0; 
 
    } 
 
    .navbar.navbar-default > .container .navbar-brand.navbar-brand-centered, 
 
    .navbar.navbar-default > .container-fluid .navbar-brand.navbar-brand-centered { 
 
    margin-left: -75px; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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 navbar-brand-centered" href="#">Website Name</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-nav"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">Page 1</a> 
 

 
     </li> 
 
     <li><a href="#">Page 2</a> 
 

 
     </li> 
 
     <li><a href="#">Page 3</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

источник

2015-11-12 07:59:08 vanburen

Центрирование кнопок на панели навигации в загрузочном блоке

ответ

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