Infinite
@Infinite
Developer

Как избавиться от отступов по краям меню bootstrap?

Необходимо сверстать вот такое меню, используя bootstrap
b635c7c4b84e472684936e98afebb91f.png

Все получилось кроме того что, справа и слева есть отступы, подскажите пожалуйста как от них избавиться?
5171c966b1954f5aa927cb25906e4d26.png
.navbar {
    margin-bottom: 0;
    border-radius: 0;
    font-size: 18px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333
}

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


.nav a {
    color: #000!important
}

.nav a:hover {
    color: #989898!important
}


ul.nav>li>a {
    white-space: nowrap
}

.nav-justified>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0;
    font-weight: 700;
    color: #000;
    text-align: center
}

.nav>li>a:focus,
.nav>li>a:hover {
    text-decoration: none;
    color: #387ba7!important;
    background-color: transparent!important
}

.nav-justified>.active>a,
.nav-justified>.active>a:focus,
.nav-justified>.active>a:hover {
    text-decoration: none;
    color: #000
}


<nav class="navbar nopadding">
			<div class="container-fluid nopadding">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>                        
					</button>      
				</div>
				<div class="collapse navbar-collapse" id="myNavbar">
					<ul id="menu-main-menu" class="nav nav-justified"><li id="menu-item-238" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-238"><a href="/">Главная</a></li>
<li id="menu-item-291" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-291"><a href="/">Услуги</a></li>
<li id="menu-item-292" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-292"><a href="/">Обо мне</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-293"><a href="/">Статьи &amp; Видео</a></li>
<li id="menu-item-295" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-295"><a href="/">Связаться со мной</a></li>
</ul>				</div>
			</div>
		</nav>
  • Вопрос задан
  • 656 просмотров
Решения вопроса 1
@Eugeny1987
Работаю с HostCMS
Именно от отступов 2:
.nav-justified>li:first-child a {
text-align:left;
}

.nav-justified>li:last-child a {
text-align:right;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
w_b_x
@w_b_x
Именно от отступов:
.nav-justified>li>a:first-child {
text-align:left;
}

.nav-justified>li>a:last-child {
text-align:right;
}
Ответ написан
Комментировать
.collapse,
.container-fluid
{
      padding: 0;
}
.nav > li > a
{
      padding-left: 0;
      padding-right: 0;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы