繁体   English   中英

砌体在移动视图中弄乱了Bootstrap导航栏

[英]Masonry messing up Bootstrap nav-bar in mobile view

我正在尝试使用引导程序设置菜单栏,该菜单栏切换到移动设备上的堆叠式下拉汉堡栏。 一切都完美无缺,不包括砖石。 但不幸的是,该项目需要砌筑才能显示图像。 导航栏在没有砌体的情况下在移动设备中扩展

这就是我用砖石砌成的结果。 导航栏通过Masonry CS + JS在移动设备中扩展

导航栏的代码:

<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>

我不确切知道砌体框架的哪一部分导致了这种情况的发生。 有什么办法可以找出答案吗? 有没有可能的解决方法?

编辑:我已经找到了问题的一部分,但仍然不知道如何解决它。 在此处输入图片说明

如果可以的话,您可以尝试用格栅代替砖石。

我通过注释掉masonry.css中的所有.nav样式来解决此问题。 如果这是个不好的做法,则应为Idk,但这为我解决了这个问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM