堆棧內存溢出
  簡體   English   中英

Div在超小型設備（xs）引導程序上未顯示

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

 原文  2015-03-02 02:28:27  3   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