Question

我使用bootstrap并在侧栏中创建了一个媒体列表。

<aside class="col-md-4">
    <div class="content">
        <ul class="media-list">
            <li class="media">
            <li class="media">
            <li class="media">

在中/大屏幕上我得到一个占据页面三分之一的列，此列中的媒体项目位于彼此之上。

在小型设备上，该列现在是屏幕宽度的100％，媒体项的行为方式相同。

然而，我要做的是将媒体项目保持100％，但让它们并排放置，这样用户必须水平滚动才能看到下一个项目。

我试过了

.media { float:left; display:inline }

不同的变化会让媒体项目并排显示，但它们不会是屏幕的100％而且不会离开屏幕，所以当一个项目到达页面末尾时，下一个项目将显示在下面而不是而不是视口之外。

那我怎么能举个例子，设置

 .media {width:100%; float:left;}
 .media-list {width: auto; overflow-x: scroll}

感谢您的帮助

Answer 1

.media-list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap; }

.media {
display: inline-block;
vertical-align: middle;
width: 100%; }

这有效。

Bootstrap媒体列表，如何让项目水平滚动？

1 个答案: