[英]col-xs not working for media screen less than 768px
body { margin-left: 50px !important; margin-right: 50px !important; } .section { background: rgba(255, 255, 255, 0.69); height: 200px; border: 1px solid #000; } .outer { display: table; width: 100%; height: 100vh; } .inner { display: table-cell; vertical-align: middle; text-align: center; } .parent-div { margin: 0 auto; width: 82%; } .table-parent { display: table; } .table-child { display: table-cell; vertical-align: middle; } .section:hover { color: #ececeb; transition: all 0.3s; cursor: pointer; } .table-child .fa { padding-right: 6px !important; } .section:hover .item-overlay.bottom { bottom: 0; } .item-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); overflow: hidden; width: 100%; -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; } .item-overlay.bottom { bottom: 100%; } .table-child p { display: inline-block; text-rendering: auto; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); } a { text-decoration: none; color: #333 !important; } #AddProduct { display: inline-block; } @media screen and (max-width: 767px) { .col-xs-12 { width: 100% !important; } }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <body> <div class="row outer"> <div class="row inner"> <div class="clearfix parent-div"> <a data-toggle="modal" data-target="#myModal"> <div class="col-md-4 col-sm-6 col-xs-12 section table-parent"> <div class="item-overlay bottom"></div> <h4 class="table-child"><i class="fa fa-plus-circle" aria-hidden="true"></i> <p>ADD A PRODUCT</p> </h4> </div> </a> <a> <div class="col-md-4 col-sm-6 col-xs-12 section table-parent"> <div class="item-overlay bottom"></div> <h4 class="table-child"><i class="fa fa-pencil" aria-hidden="true"></i> <p>EDIT A PRODUCT</p> </h4> </div> </a> <a data-toggle="modal" data-target="#removeModal"> <div class="col-md-4 col-sm-6 col-xs-12 section table-parent"> <div class="item-overlay bottom"></div> <h4 class="table-child"><i class="fa fa-minus-circle" aria-hidden="true"></i> <p>REMOVE A PRODUCT</p> </h4> </div> </a> <div class="col-md-4 col-sm-6 col-xs-12 section table-parent"> <div class="item-overlay bottom"></div> <h4 class="table-child"><i class="fa fa-bars" aria-hidden="true"></i> <p>USER'S LIST</p> </h4> </div> <div class="col-md-4 col-sm-6 col-xs-12 section table-parent"> <div class="item-overlay bottom"></div> <h4 class="table-child"><i class="fa fa-sort" aria-hidden="true"></i> <p>ORDERS</p> </h4> </div> <div class="col-md-4 col-sm-6 col-xs-12 section table-parent"> <div class="item-overlay bottom"></div> <h4 class="table-child"><i class="fa fa-power-off" aria-hidden="true"></i> <p>LOGOUT</p> </h4> </div> </div> </div> </div> </body>
我正在使用Bootstrap v3。 在使用col-xs-12的移動設備中，div的寬度不是100％。 代碼對於中型和小型屏幕都可以正常工作，但對於小於768的屏幕，則保留50％的寬度。這是行為屏幕截圖的鏈接。 圖片
沒有其他所有可用的解決方案，但沒有一個對我有用。
我不知道如何將其表達出來，但是在調整瀏覽器窗口的大小時我得到了期望的輸出，但是代碼似乎在實際的設備和Web檢查器上不起作用。 設備圖像的屏幕截圖
另外，我在CSS末尾也嘗試了！important，但是遇到了同樣的問題。
取自chetan kalra的評論，並發布了答案，以供他人快速參考。 我也遇到了這個問題，發現缺少視口元標記。 在下面添加行就可以了。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
為什么@media only screen and (min-width: 768px) 也適用於屏幕寬度小於768px
[英]why @media only screen and (min-width: 768px) also apply for screen width less than 768px
如果僅在HTML中屏幕尺寸小於768像素，則在特定位置將2分行
[英]Break up row in 2 at specific place if screen size is less than 768px in html only
為什么按按鈕只能工作 2 次？ 當屏幕縮小到小於 768px 時
[英]Why does pressing the button only work 2 times? when the screen is narrowed to less than 768px
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.