Question

＆＃13;

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;
  }
}

＆＃13;

<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>&nbsp;
              <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>&nbsp;
              <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>&nbsp;
              <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>&nbsp;
            <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>&nbsp;
            <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>&nbsp;
            <p>LOGOUT</p>
          </h4>
        </div>

      </div>
    </div>
  </div>

</body>

＆＃13;

我正在使用Bootstrap v3。在使用col-xs-12的移动设备中，div不会占用100％的宽度。代码适用于中小屏幕，但屏幕保持50％宽度小于768.以下是行为屏幕截图的链接。 Image

通过所有其他可用的解决方案，但没有一个适合我。

我不知道如何将其用于单词，但我在调整浏览器窗口大小时获得了所需的输出，但代码似乎无法在实际设备和Web检查器上运行。设备Image

的屏幕截图

此外，我在css结束时尝试使用！important但面临同样的问题。

Answer 1

取自chetan kalra的评论并发布答案以供其他人快速参考。我也遇到了这个问题，发现viewport元标记丢失了。添加以下线就行了。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

col-xs不适用于低于768px的媒体屏幕

1 个答案: