центральной кнопки в Bootstrap навигационной панели (за пределами коллапса)

Я хотел бы иметь кнопку в панели навигации, которая является:центральной кнопки в Bootstrap навигационной панели (за пределами коллапса)

рядным с остальными деталями NavBar (т.е. он не получает толкнуло на следующий линия);
, расположенный за пределами сложенной навигационной секции; и
всегда находится в центре страницы для всех разрешений экрана (в том числе, когда сбрасывается правая сторона навигационной панели).

У меня возникают определенные проблемы с:

центрирования кнопку; и
некоторые элементы навигационной панели, которые не работают при меньшем разрешении экрана (когда navbar сбрасывается).

Ниже мой код.

Alternative CSS, что я пробовал:

.navbar-button { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    text-align: center; 
    white-space: nowrap; 
}

, но это вызвало некоторые из других звеньев NavBar, чтобы не работать. Впоследствии я попытался использовать z-index, но он, похоже, не работал.

body { 
 
    padding-top: 50px; 
 
    padding-bottom: 20px; 
 
} 
 
.section { 
 
    margin-bottom: 30cm; 
 
} 
 
.navbar-button { 
 
    display: inline-block; 
 
    text-align: center; 
 
}

<!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"> 
 

 
    <title>Test</title> 
 

 
    <!-- Bootstrap Core CSS --> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
      <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="#brand">Brand</a> 
 
     <div class="navbar-button"> 
 
      <button type="button" class="btn btn-primary navbar-btn">Button</button> 
 
     </div> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="text-center"> 
 
      <a href="#link1">Link-1</a> 
 
      </li> 
 
      <li class="text-center"> 
 
      <a href="#link2">Link-2</a> 
 
      </li> 
 
      <li class="text-center"> 
 
      <a href="#link3">Link-3</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="section" id="brand"> 
 
     <h3>Top</h3> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="section" id="link1"> 
 
     <h3>Section-1</h3> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="section" id="link2"> 
 
     <h3>Section-2</h3> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="section" id="link3"> 
 
     <h3>Section-3</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

источник

2016-07-25 bernie

Вы можете использовать позицию: абсолютная, но не применять ширину 100%, как это в основном, вероятно, покрывая вашу кнопку ссылки/тумблер. Вы также можете применить .navbar-btn непосредственно к кнопке внутри внешнего div.

Пример CSS:

.button-center { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
}

Рабочий пример:

body { 
 
    padding-top: 50px; 
 
    padding-bottom: 20px; 
 
} 
 
.section { 
 
    margin-bottom: 30cm; 
 
} 
 
.button-center { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
     <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="https://www.github.com" target="_blank">Brand</a> 
 
     <button type="button" class="btn btn-primary navbar-btn button-center">Button</button> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="text-center"> 
 
      <a href="https://www.github.com" target="_blank">Test Link</a> 
 
     </li> 
 
     <li class="text-center"> 
 
      <a href="#link2">Link-2</a> 
 
     </li> 
 
     <li class="text-center"> 
 
      <a href="#link3">Link-3</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="section" id="brand"> 
 
     <h3>Top</h3> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="section" id="link1"> 
 
     <h3>Section-1</h3> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="section" id="link2"> 
 
     <h3>Section-2</h3> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="section" id="link3"> 
 
     <h3>Section-3</h3> 
 
    </div> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

источник

2016-07-25 19:57:09 vanburen

центральной кнопки в Bootstrap навигационной панели (за пределами коллапса)

ответ

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