col-xs不适用于小于768像素的媒体屏幕
[英]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>
I am using Bootstrap v3. 
我正在使用Bootstrap v3。 The divs are not taking 100% width in mobile devices with col-xs-12. 在使用col-xs-12的移动设备中，div的宽度不是100％。 Code is working fine for medium and small screens but retaining the 50% width for screens less than 768. Here is the link to the screenshot of the behaviour. 代码对于中型和小型屏幕都可以正常工作，但对于小于768的屏幕，则保留50％的宽度。这是行为屏幕截图的链接。 Image 图片
Gone through all other available solutions but none worked for me. 没有其他所有可用的解决方案，但没有一个对我有用。
I don't know how to put this into words but I am getting the desired output on resizing the browser window but the code doesn't seem to work on the actual device and the web inspector. 我不知道如何将其表达出来，但是在调整浏览器窗口的大小时我得到了期望的输出，但是代码似乎在实际的设备和Web检查器上不起作用。 Screenshot of the device Image 设备图像的屏幕截图
Additionally I tried with !important as well at the end of css but facing the same problem. 另外，我在CSS末尾也尝试了！important，但是遇到了同样的问题。
1 个解决方案
解决方案1
2 2017-09-25 11:14:36
Taken from comment of chetan kalra and posting answer for quick reference for others. 取自chetan kalra的评论，并发布了答案，以供他人快速参考。 I also faced this issue and found viewport meta tag was missing. 我也遇到了这个问题，发现缺少视口元标记。 Adding below line did the trick. 在下面添加行就可以了。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.