Flexbox bootstrap

@BlacKCheT · Регистрация: 11.03.2018

Author24 — интернет-сервис помощи студентам

Не могу понять почему менюшка не растягивается по ширине? Уже все по-всяком пробовал..

HTML5

 <div class="py-1 mb-2">
<nav class="nav d-flex justify-content-between">
    <ul class="menu">
        <?php foreach ($data_menu as $category) { ?>
            <li>
                <a href="#" class="text-mutted"><?php echo $category['name']; ?></a>
                <?php if (!empty($category['children'])) { ?> 
                    <ul class="submenu">
                        <?php foreach ($category['children'] as $child) { ?> 
                            <li>
                                <a href="<?php echo $child['link']; ?>"><?php echo $child['name']; ?></a>
                            </li>
                        <?php } ?>
                    </ul>
                <?php } ?> 
            </li>
        <?php } ?>
    </ul>
</nav>
  </div>

CSS

ul.menu {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.submenu {
    display: block;
    content: ' ';
    clear: both;
    float: none;
    margin-top: 7px;
    padding: 0;
}
ul.menu > li {
    float: left;
    position: relative;
    z-index: 1;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: #000;
    opacity: 0.5;
    text-decoration: none;
}
ul.menu > li > a:first-child {
    border-radius: 10px 10px 0 0; 
}
ul.menu > li > a:hover {
    background-color: #000;
    opacity: 0.8;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 100%;
    min-width: 200px;
    top: 37px;
    left: 0;
    background-color: white;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: #999;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}
 
ul.menu > li:hover > ul.submenu {
    display: block;
}

@fol · 09.01.2019, 09:40

классы d-flex и justify-content-between перевесить с nav на ul.menu, убрать display:block у меню и добавить

CSS

1
2
3

ul.menu{
  width:100%
}

@BlacKCheT · 09.01.2019, 17:21 **[ТС]**

Не помогло.. 0 изменений

@fol · 10.01.2019, 13:08

все работает
https://jsfiddle.net/rmtu6og3/
бутстрап-то подключен?

@wwowa · 10.01.2019, 13:46

В общем то бутстраповское меню и так должно растягиваться. Только, я думаю, зачем тащить бутстрап на сайт и не использовать его. Меню ведь не так выглядит совсем.
вот такое простая навигация растягивается..

HTML5

<ul class="nav justify-content-between">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
 </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link1</a>
 </li>
  </ul>

У них есть еще полноценное меню с navbar контейнером.

@BlacKCheT · 10.01.2019, 14:35 **[ТС]**

да, через cdn

Javascript

1
2
3

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Добавлено через 10 минут
Вот тэк вот решил..

PHP

<div class="pt-3">
    <ul class="menu d-flex justify-content-between">
        <?php foreach ($data_menu as $category) { ?>
            <li>
                <a href="#" class="text-mutted"><?php echo $category['name']; ?></a>
                <?php if (!empty($category['children'])) { ?> 
                    <ul class="submenu">
                        <?php foreach ($category['children'] as $child) { ?> 
                            <li>
                                <a href="<?php echo $child['link']; ?>"><?php echo $child['name']; ?></a>
                            </li>
                        <?php } ?>
                    </ul>
                <?php } ?> 
            </li>
        <?php } ?>
    </ul>
  </div>

CSS

ul.menu > li > a {
    display: block;
    padding: 10px;
    padding-right: 17.5px;
    padding-left: 17.5px;
    color: white;
    background-color: #000;
    opacity: 0.5;
    text-decoration: none;
}

@BlacKCheT Лучше не лучше, но лучше. 16 / 14 / 3 Регистрация: 11.03.2018 Сообщений: 422
	09.01.2019, 17:21 [ТС]	3
	Не помогло.. 0 изменений 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	10.01.2019, 13:08	4
	все работает https://jsfiddle.net/rmtu6og3/ бутстрап-то подключен? 0

	10.01.2019, 14:35