Как переместить каждый элемент <li>на новую строку по вертикали <nav>

Question

Я создал вертикальную панель навигации, которая содержит элемент ul с несколькими тегами li внутри. Я хочу, чтобы каждый тег li отображался в отдельной строке.

Я могу сделать это легко, применяя div class = clearfix после каждого тега li, но я получаю предупреждение о том, что его нельзя размещать внутри ul. Он хорошо воспроизводится в браузере, но мне не нравятся предупреждения, и я OCD о синтаксисе.

Я пробовал несколько разных подходов, чтобы решить проблему.

Исправления CSS, такие как Margin / Padding, Clear, Display: блокировать все безрезультатно.

Вот мой пример кода ниже:

 <div class="col-sm-2" id="siteSafetyContainer" style="display:none">
            <nav class="navbar navbar-inverse" style="font-size:12px;">
                <div id="row">
                    <ul class="nav navbar-nav navbarcustom">
                        <li>
                            <a href="#">Permits</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Standard Safety Permits</a>
                        </li>                           
                        <li>
                            <a href="#"  onclick="">Toolbox Talks</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Atlantic Marine Corps Communities</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Campbell Crossing</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Fort Hood Family Housing</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Ft Drum Mountain Community</a>
                        </li>  
                        <li>
                            <a href="#"  onclick="">PAL</a>
                        </li>                            
                        </ul>
                </div>
            </nav>
        </div>

Стандартные разрешения на безопасность

Обсуждение панели инструментов

Сообщества Атлантического Морского Корпуса

Кэмпбелл Кроссинг

Форт Худ Семейное жилье

Сообщество Ft Drum Mountain

PAL

Answer 1

Попробуйте это

.navbar-nav{
  flex-flow: column wrap !important;
  min-width: 260px;
}

Answer 2

McHat и cpt-cruncy,

Спасибо вам обоим! Это была комбинация обоих ваших ответов. Смотрите ниже:

.navbarcustom > li {
flex-flow: column wrap !important;
min-width: 260px;}

Answer 3

.navbarcustom li {
 display: block;
}