Масонство messing up Bootstrap nav-bar в мобильном режиме

Question

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

И это то, что мой результат выглядит с каменной кладкой.

Код для нав-бар:

<nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#divMenuOptions" aria-expanded="false" 
        style="margin-top:20px;margin-botton:0px"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      </div> 

      <div class="collapse navbar-collapse" id="divMenuOptions" style="margin-top:10px"> 
      <ul class="nav navbar-nav"> 
       <li><a href="/about">About</a></li> 
       <li><a href="/faq">FAQ</a></li> 
       <li><a href="/contactus">Contact Us</a></li> 
       <li><a href="/recently-viewed">Recently Viewed</a></li> 
       <li><a href="/favorites">Favorites</a></li> 
      </ul> 
      <form id="image_url_form" method="POST" action="/classify_url" class= "navbar-form navbar-left visible-md-block visible-lg-block hidden-xs hidden-sm"> 
       <div class="form-group"> 
       <input type="text" name = "url" class="form-control" style="width:340px;" id="image_url_input" placeholder="Place image url here and hit enter!"> 
       </div> 
      </form> 
      <form action="/fileupload" method="POST" id = "theform" enctype="multipart/form-data" class= "navbar-form" style="float:left;"> 
       <div class="form-group"> 
       <input type="button" id="btnBrowseFile" class="btn btn-primary" value="Browse for files"/> 
       <input type="file" id="thefile" name="file" style="display:none"></input> 
       <!-- class="btn btn-default" --> 
       </div> 
      </form> 
      <p id="file-name" class="margin-10 bold-10"></p> 
      </div> 
     </div> 
     </nav> 

Я не знаю точно, какая часть структуры масонства является причиной, чтобы это произошло. Есть ли способ узнать это? И есть ли возможная работа?

EDIT: Я нашел часть проблемы, но все еще не знаю, как ее исправить.

Answer 1

Я установил вопрос закомментировав все .nav стилистики в masonry.css. Idk, если это плохая практика, но я решил проблему для меня.

Answer 2

Вы можете попробовать gridster вместо кирпичной кладки, если это вариант