Question

请帮帮我。我正在使用Squarespace CMS（有点像Wordpress），它删除了这段代码：

<div id="navBlock" role="navigation">                       
    <nav class="main-nav" data-content-field="navigation">
        <ul>
            <li class="page-collection">
            <a href="/palindrom-1/">palindrom</a>
            </li>
            <li class="blog-collection active-link">
              <a href="/">Blog</a>
            </li>
            <li class="page-collection">
              <a href="/about/">About</a>
            </li>
        </ul>

        <select id="mobileSelect" name="mobileSelect">
            <option class="mobile-select-label" value="">Navigation</option>
            <option class="page-collection" value="/palindrom-1/">palindrom</option>
            <option class="blog-collection" value="/" selected="selected">Blog</option>
            <option class="page-collection" value="/about/">About</option>
        </select>
    </nav>
</div>

这很酷，而且很有效。但我迫切希望确保此导航栏不会在移动设备上崩溃（水平＆lt; 640px）。如何通过额外的CSS或JavaScript实现这一目标？我无法更改上面的代码，因为它是由CMS制作的。我只能注入额外的HTML，CSS或JS。至少我发现上面的代码片段不是Bootstrap代码，而是干净的HTML。

你能帮助我吗？

亲切的问候罗伯特

Answer 1

没有额外的CSS： without css

使用额外的#mobileSelect {display：none; }： #mobileSelect { display: none; }

额外的ul {display：block！important; }： ul { display: block!important; }

这几乎就是我的魔杖。但是如何删除icky矩形？

提前致谢

如何防止HTML-navbar在移动设备上崩溃？

1 个答案: