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% 的宽度。这里是行为截图的链接。 Image
尝试了所有其他可用的解决方案，但没有一个对我有用。
我不知道如何用语言表达，但我在调整浏览器窗口大小时获得了所需的输出，但代码似乎无法在实际设备和网络检查器上运行。设备截图Image
此外，我在 css 末尾也尝试了 !important，但遇到了同样的问题。
最佳答案
摘自 chetan kalra 的评论并发布答案以供其他人快速引用。我也遇到了这个问题，发现视口(viewport)元标记丢失了。添加下面一行就可以了。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
关于html - col-xs 不适用于小于 768px 的媒体屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44230996/