0
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>我使用的引導V3。在使用col-xs-12的移動設備中，div的寬度不會超過100％。代碼在中小屏幕上工作正常，但對於小於768的屏幕保留50％的寬度。以下是行爲屏幕截圖的鏈接。 Image
通過所有其他可用的解決方案，但沒有爲我工作。
我不知道如何將它放入單詞中，但我在調整瀏覽器窗口大小時獲得了所需的輸出，但代碼似乎不適用於實際設備和Web檢查器。該設備的屏幕截圖Image
此外，我嘗試着！重要的以及在CSS的結束，但面臨同樣的問題。
可否請你分享一些CSS和HTML請的，否則我們就只是猜測，一個快速的黑客，你可以加上'！important'在'.COL-XS-12' –
寬度後我認爲問題在於我們的班級。試試這個序列xs，sm，md，lg – mastermind
這個問題可能是新iPhone上的像素密度較高。我認爲這裏的答案將幫助你：https://stackoverflow.com/questions/19933143/css-media-queries-pixel-density-desktop-and-mobile-devices – BSMP