堆栈内存溢出
  繁体   English   中英

Div在超小型设备（xs）引导程序上未显示

[英]Div not Showing on extra small devices (xs) bootstrap

 原文  2015-03-02 02:28:27  6   4    html/ css/ twitter-bootstrap

问题描述

如果用户从台式机，平板电脑或移动设备进行访问，我会有一些div更改，并且我现在正在使用的div移动版存在一些问题，我使用此代码显示分辨率是否为最小 

<div class="col-md-9 contenidox hidden-lg hidden-md hidden-sm">

但是当我将浏览器调整为较小尺寸（如移动设备）时，它什么也没显示

这是我的bootply代码

http://www.bootply.com/LG64Xhg8GG

4 个解决方案

解决方案1
 0  2015-03-02 02:42:08

问题是其他div继承了css类，关闭了div标签并开始工作

解决方案2
 0 已采纳  2015-03-02 03:23:00

它固有地使用hidden-sm，因此只需设置xs的col，例如col-xs-12

解决方案3
 0  2015-03-02 04:39:12

请删除hidden-sm class ，并将其替换为col-sm-12 。

解决方案4
 0  2015-03-02 05:20:49

您可以使用visible-xs类。 下面的例子是... 

<div class="col-md-9 contenidox visible-xs">

现在仅在移动设备上可见。

Bootstrap - 移动下一个<div>在以前的中小型设备之上</div><div id="text_translate"><p>我在Bootstrap中有以下div ：</p><pre> &lt;div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0"&gt; &lt;div class="d-flex justify-content-between align-items-center"&gt; &lt;div class="h5 mb-0"&gt;Text text&lt;/div&gt; &lt;div class="text-right"&gt; &lt;div class="actions"&gt; &lt;a href="#" class="action-item"&gt;&lt;i class="far fa-heart mr-1"&gt;&lt;/i&gt; 50&lt;/a&gt; &lt;a href="#" class="action-item"&gt;&lt;i class="far fa-eye mr-1"&gt;&lt;/i&gt; 250&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;p class="font-size-1"&gt;Text text text text text &lt;/p&gt; &lt;/div&gt;</pre><p> 在中小型设备上，我希望第二个div具有class="actions"到 go 在第一个顶部并左对齐。</p><p> 到目前为止，我已经尝试做类似下面的事情，但它不起作用。 我缺少的东西：</p><pre> @media only screen and (max-width: 960px) {.col-xs-12 { display: flex; flex-direction: column-reverse; } }</pre><p> 一些技巧？ 谢谢</p></div>

[英]Bootstrap - move the next <div> on top of previous on medium and small devices

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何更改 XS（超小）引导程序中的“高度”元素值？ 在小型设备（xs）中水平居中div内的多个div 超小型设备中的引导列问题 用于超小屏幕尺寸设备的引导程序列 如何在超小型设备中重新排列引导网格 Bootstrap 3-减少 <div> 小型设备的电话的宽度正确（&lt;768px） 如何使用引导程序在小屏幕或超小屏幕中居中 div 如何仅在不影响bootstrap3中其他大小的情况下将填充添加到超小（xs）列 对于Bootstrap 3中的小型设备，将上div向下和向下div移至ip Bootstrap - 移动下一个<div>在以前的中小型设备之上</div><div id="text_translate"><p>我在Bootstrap中有以下div ：</p><pre> &lt;div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0"&gt; &lt;div class="d-flex justify-content-between align-items-center"&gt; &lt;div class="h5 mb-0"&gt;Text text&lt;/div&gt; &lt;div class="text-right"&gt; &lt;div class="actions"&gt; &lt;a href="#" class="action-item"&gt;&lt;i class="far fa-heart mr-1"&gt;&lt;/i&gt; 50&lt;/a&gt; &lt;a href="#" class="action-item"&gt;&lt;i class="far fa-eye mr-1"&gt;&lt;/i&gt; 250&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;p class="font-size-1"&gt;Text text text text text &lt;/p&gt; &lt;/div&gt;</pre><p> 在中小型设备上，我希望第二个div具有class="actions"到 go 在第一个顶部并左对齐。</p><p> 到目前为止，我已经尝试做类似下面的事情，但它不起作用。 我缺少的东西：</p><pre> @media only screen and (max-width: 960px) {.col-xs-12 { display: flex; flex-direction: column-reverse; } }</pre><p> 一些技巧？ 谢谢</p></div>
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM