Question

我正在使用Bootstrap开发我的一个网站。我希望列表<li>在较小的屏幕中打开时不会崩溃，但它们必须只能在较小的设备上水平滚动。

HTML

<div class="container">
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12" id="my-menubar">
        <ul >
            <li id="e1" ><a href="#"><button id="event1">Menu 1</button></a></li>
            <li id="e2" ><a href="#"><button id="event2">Menu 2</button></a></li>
            <li id="e3" ><a href="#"><button id="event3">Menu 3</button></a></li>
            <li id="e4" ><a href="#"><button id="event4">Menu 4</button></a></li>
            <li id="e5" ><a href="#"><button id="event5">Menu 5</button></a></li>
            <li id="e6" ><a href="#"><button id="event6">Menu 6</button></a></li>
        </ul>
    </div>
</div>

CSS

#my-menubar { 
height: auto;
background-color: #ffffff; }
#my-menubar li { 
list-style: none;
float:left; }
#my-menubar button { 
width:auto; 
margin:4px; }
#my-menubar a {
padding: 15px 45px 0px 45px; }
#event1, #event2, #event3, #event4,#event5, #event6 {
width:115px;
height:35px;
color: white;
border-radius:40px;
border-style:none;
font-size: 16px;
background-color: #27413f; }

Answer 1

您需要css媒体查询

/* !Phone vertical */
@media (max-width: 520px) { 
    .menu { 
        overflow-y: scroll;
        // apply other styles to
    }
}

/* !Phone horizontal, tablet vertical */
@media (max-width: 760px) { 
}

/* !Tablet horizontal */
@media (max-width: 960px) {
}

在其他css规则下添加此项，并在满足媒体查询时应用样式，对于第一个，屏幕宽度小于520px。

请参阅this和this，或只是google了解详情。

如何仅在较小的设备中水平滚动列表？

1 个答案: