移动中的容器流体

Question

我有一个这样的清单：

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

大屏幕可以，但在移动信息div中如此。是否可以在移动设备的项目下打开信息div为％100（容器 - 流体）：

如果有可能是关键字是什么，或者你能展示一个例子吗？提前谢谢。

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>

Answer 2

在bootstrap 4中，对于所有设备中的相同列，请尝试使用

<div class="row">
<div class="col">
      1 of n
    </div>
    <div class="col">
      1 of n
    </div>
    <div class="col">
      1 of n
    </div>
       .....
      <div class="col">
      n of n
    </div>
</div>

#circle {
	width: 50px;
	height: 50px;
	background: red;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col" id="circle">
          
        </div>
        <div class="col" id="circle">
          
        </div>
         <div class="col" id="circle">
          
        </div>
         <div class="col" id="circle">
          
        </div>
         <div class="col" id="circle">
          
        </div>
      </div>