html - 移动设备中的容器流体

Question

我有一个这样的列表:

我打开一个隐藏的 div 来显示有关列表项的详细信息:

大屏幕没问题，但在移动信息 div 中如下所示。是否可以像这样在移动设备中的该元素下将信息 div 打开为 %100(Container-Fluid):

如果可能的话，关键字是什么，或者您能举个例子吗？提前致谢。

Answer 1

我创建了一个示例，您需要在其中创建两个具有相同 div 内容的位置，一个用于移动设备 (.mobile-content)，一个用于桌面设备 (.desktop-content)。

您设计它的方式是当移动设备可见时，桌面隐藏，反之亦然。您可以使用 Bootstraps 4 .d-x-none 和 .d-x-block 隐藏和显示元素。

唯一剩下的就是当你点击圆圈时你必须实现点击机制......

示例(在整页中查看):

.main-box {
 text-align:center;
}

.circle{
  flex-basis:33%;
}

.circle img{
  background:pink;
  border-radius: 50%;
  max-width:100%;
}

.mobile-content{
  flex-basis:100%;

}

.desktop-content{
  text-align:center;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="main-box container-fluid d-flex justify-content-center flex-wrap flex-lg-nowrap">
  
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  <div class="mobile-content p-2 d-lg-none">
    <p>description comes here</p>
  </div>
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  <div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
  
</div>


 <div class="desktop-content p-4 d-none d-lg-block">
    <p>description comes here</p>
  </div>