Javascript 如何以响应的方式创建水平元素？

您好，我正在尝试创建一个效果归档效果，如下所示

桌面

//lines up items vertically
 ----------------------------
|   --------------
|  |     item1    |
|  |              |
|   --------------
|   --------------
|  |     item2    |
|  |              |
|   --------------
|   --------------
|  |     item3    |
|  |              |
|   --------------

在电话里

 ----------------------------
|   --------------   -----------------
|  |     item1    | |     item2       |  
|  |              | |                 |  //line up horizontally for all items
|   --------------   -----------------
|
 ----------------------------

我用的是角度，这是我的代码

<div class="row">
   <div class="item-container col-xs-12 col-lg-4">
      <ul>
         <li ng-repeat="item in items">
              <div>{{item.name}}</div>
              //other html to show items infos...
         </li>
      </ul>
   <div>
</div>

在手机中，我只能在一行有有限的物品，只能容纳3个物品，它会将第4个物品推到下一行，因为物品容器没有足够的宽度。我需要我所有的项目超过10个水平显示。有办法做到这一点吗

---

非常感谢

首先，您需要两种样式，一种用于桌面，另一种用于手机，因此通过媒体查询，将此样式用于手机

容器内部元素的使用

display: inline-block;

white-space: nowrap;

以及在货柜使用方面

display: inline-block;

white-space: nowrap;

演示-

如果要删除内联块之间的空白，请将字体大小：0添加到父级

.集装箱{ } .街区{ 宽度：100px； 高度：100px； 背景：灰色； } @媒体屏幕和最小宽度：320px，最大宽度：480px{ .集装箱{ 空白：nowrap； 溢出-x：滚动； } .街区{ 显示：内联块； } }

---

你想让所有项目一次在屏幕上显示出来，或者当用户刷完后显示出来？只是想让它们水平放置？如果父容器的宽度为100%，则可以使用%eg-宽度：10%的宽度，如果您有10个项目，则父容器的宽度为100%，我希望使用它查看部分项目，并且它们可以向右滑动以查看其余项目。选择水平旋转木马。非常感谢你。我还有一个问题。这是否可以在css中不使用媒体查询的情况下通过引导创建？您需要在媒体查询中添加样式，否则样式将无法应用