[英]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.