Bootstrap меню, центральный элемент между 2 элементами - PullRequest
Новая
       5

Bootstrap меню, центральный элемент между 2 элементами

2 голосов
/ 03 марта 2020

У меня есть следующее меню: 

.navbar {
	box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
	background: #fff;
	border: 0;
	max-height: 73px
}

.navbar-center>span>a {
	display: inline-block;
	position: relative;
}

#header>.navbar>div:nth-child(2)>ul>li:nth-child(2)>a {
	padding-right: 0;
}

#header>.navbar>div:nth-child(2)>ul>li:nth-child(3)>a {
	padding-left: 0;
}

section#header {
	padding: 0;
	border-radius: 0;
	height: 80px;
}

#header>.navbar>.navbar-center {
	margin-top: -7px;
}

#header>.navbar>.navbar-center>span:nth-child(2),
#header>.navbar>.navbar-center>span:nth-child(3),
#header>.navbar>.navbar-center>span:nth-child(4),
#header>.navbar>.navbar-center>span:nth-child(5) {
	margin-left: 6%
}

.navbar-nav {
	float: none;
	margin: 0 0 0 11%
}

.navbar-brand {
	float: none;
	font-size: 20px;
}

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

@media (max-width: 1400px) {
	#header>.navbar>.navbar-center>span:nth-child(2),
	#header>.navbar>.navbar-center>span:nth-child(3),
	#header>.navbar>.navbar-center>span:nth-child(4),
	#header>.navbar>.navbar-center>span:nth-child(5) {
		margin: 0
	}
}

@media (max-width: 1000px) {
	.navbar-center {
		text-align: inherit;
		margin-left: 3%;
	}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<section id="header">
    <nav class="navbar navbar-fixed-top" role="navigation">
        <a href="#">
            LOGO
        </a>
        <div class="navbar-center navbar-brand">
            <span><a class="navbar-brand" href="#">MENU 1</a></span>
            <span><a class="navbar-brand" href="#">MENU 2</a></span>
            <span><a class="navbar-brand" href="#">MENU 3</a></span>
            <span><a class="navbar-brand" href="#">MENU 4</a></span>
            <a href="#">
                CENTER ME
            </a>
        </div>
        <div>
            <ul class="nav navbar-nav navbar-right">
                <li style="background: #244b5a;">
                    <a href="/logout.php">
                        Logout
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</section>

Я бы хотел центрировать блок CENTER ME между левым и правым элементом.

enter image description here

Я пытался использовать margin: 0 auto;

1 Ответ

0 голосов
/ 03 марта 2020

Как я уже сказал в комментарии, главная цель состоит в том, чтобы сделать это:
Вам нужно поместить элемент после меню 4, который будет принимать всю оставшуюся ширину родителя. Затем в этот элемент поместите еще один дисплей в виде блока с полем left и right auto.

Я также сказал, что bootstrap 3 поставляется с вспомогательными классами, которые помогут вам сделать это. Вы можете найти их, прочитав там документы: https://getbootstrap.com/docs/3.3/css/#helper -classes-floats

Будьте внимательны к этой части кода: 

        <div class="navbar-center navbar-brand">
            <span><a class="navbar-brand" href="#">MENU 1</a></span>
            <span><a class="navbar-brand" href="#">MENU 2</a></span>
            <span><a class="navbar-brand" href="#">MENU 3</a></span>
            <span><a class="navbar-brand" href="#">MENU 4</a></span>
            <div class=container">
                <div class="center-block">center me</div>
            </div>
        </div>

.container создайте элемент, который заполнит оставшееся пространство.
.center-block применит следующее CSS, и оба они выйдут из коробки с bootstrap 3. 

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

ВНИМАНИЕ В следующем фрагменте содержится другая ошибка css, которая не позволяет ему работать должным образом. Вам нужно будет расширить фрагмент, чтобы действительно увидеть поведение центрированного элемента. 

.navbar {
	box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
	background: #fff;
	border: 0;
	max-height: 73px
}

.navbar-center>span>a {
	display: inline-block;
	position: relative;
}

#header>.navbar>div:nth-child(2)>ul>li:nth-child(2)>a {
	padding-right: 0;
}

#header>.navbar>div:nth-child(2)>ul>li:nth-child(3)>a {
	padding-left: 0;
}

section#header {
	padding: 0;
	border-radius: 0;
	height: 80px;
}

#header>.navbar>.navbar-center {
	margin-top: -7px;
}

#header>.navbar>.navbar-center>span:nth-child(2),
#header>.navbar>.navbar-center>span:nth-child(3),
#header>.navbar>.navbar-center>span:nth-child(4),
#header>.navbar>.navbar-center>span:nth-child(5) {
	margin-left: 6%
}

.navbar-nav {
	float: none;
	margin: 0 0 0 11%
}

.navbar-brand {
	float: none;
	font-size: 20px;
}

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

@media (max-width: 1400px) {
	#header>.navbar>.navbar-center>span:nth-child(2),
	#header>.navbar>.navbar-center>span:nth-child(3),
	#header>.navbar>.navbar-center>span:nth-child(4),
	#header>.navbar>.navbar-center>span:nth-child(5) {
		margin: 0
	}
}

@media (max-width: 1000px) {
	.navbar-center {
		text-align: inherit;
		margin-left: 3%;
	}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<section id="header">
    <nav class="navbar navbar-fixed-top" role="navigation">
        <a href="#">
            LOGO
        </a>
        <div class="navbar-center navbar-brand">
            <span><a class="navbar-brand" href="#">MENU 1</a></span>
            <span><a class="navbar-brand" href="#">MENU 2</a></span>
            <span><a class="navbar-brand" href="#">MENU 3</a></span>
            <span><a class="navbar-brand" href="#">MENU 4</a></span>
            <div class=container-fluid">
                <div class="center-block">center me</div>
            </div>
        </div>
        <div>
            <ul class="nav navbar-nav navbar-right">
                <li style="background: #244b5a;">
                    <a href="/logout.php">
                        Logout
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</section>
...