CSS：在小屏幕上使用全角的div无法正常工作

Question

我需要在右边放置一个div。 在大屏幕上，它可以正确定位自己。

但是，在小屏幕中，选项和文本位于右侧。 我想在小型设备上将白色背景扩展到全宽，并在中心选项，文本和按钮上进行扩展。 现在，文本被剪切。

CodePen：

https://codepen.io/ogonzales/pen/GPEBbW

大屏幕：

小屏幕：

HTML：

<div class="row">

    <div class="col-md-6">
        <h1>Mis Stickers</h1>
        <p>858 reviews</p>

        <img src="{{ product.image.url }}">

        <p>Custom kiss cut stickers easily peel away from the backing. Print on the surrounding border
                    as
                    well as the stickers. Made from durable vinyl that resists scratching, heat, water and
                    sunlight.</p>
      </div>

      <div class="col-md-6 col-xs-12 col-sm-12">

      <div class="m-5 bg-white col-sx-12">

      <div class="padded">

      <form method="post">

         <div id="size">


       <button type="submit" class="btn btn-naranja text-white btn-block">Continuar
       </button>
                                                               <a  href="#" class="btn btn-naranja text-white btn-block">Continuar#}
       </a>
       </br>
       <p>Siguiente: subir imagen</p>

      </form>

      </div>
     </div>

    </div>
   </div>

Answer 1

这些类使用xs {property}{sides}-{size}格式和sm, md, lg, and xl {property}{sides}-{breakpoint}-{size}格式命名。

尝试对您使用m-md-5 （下图）：

图片

Answer 2

当您需要为特定屏幕尺寸使用一些CSS时，可以使用@media。 现在，您应该在CSS的末尾添加以下代码：

@media only screen and (max-width: 600px) {
.padded {
  padding: 0px;
}
  .bg-Smal{
    background-color: #ffffff;
  }
}

另外，将bg-Smal类添加到第一个div中：

    <div class="row">

    <div class="col-md-6">
        <h1>Mis Stickers</h1>
        <p>858 reviews</p>

        <img src="{{ product.image.url }}">

        <p>Custom kiss cut stickers easily peel away from the backing. Print on the surrounding border
                    as
                    well as the stickers. Made from durable vinyl that resists scratching, heat, water and
                    sunlight.</p>
      </div>

      <div class="bg-Smal col-md-6 col-xs-12 col-sm-12">

      <div class="m-5 bg-white col-sx-12">

      <div class="padded">

      <form method="post">

         <div id="size">


       <button type="submit" class="btn btn-naranja text-white btn-block">Continuar
       </button>
                                                               <a  href="#" class="btn btn-naranja text-white btn-block">Continuar#}
       </a>
       </br>
       <p>Siguiente: subir imagen</p>

      </form>

      </div>
     </div>

    </div>
   </div>

有关更多信息，您可以访问以下链接： https : //www.w3schools.com/csSref/css3_pr_mediaquery.asp

Answer 3

公平，没有用。 您已在代码中编写了plan css ，响应式css代码在哪里？

你有

.padded {
  padding: 80px;
}

在您的代码中，他是对此行为负责的人。 因此，您编写了一个响应式css来控制他的行为。 我们将此响应式CSS称为media queries 。 您可以在此处了解media queries的基础。

现在，让我们解决您的问题。

您的html dom在两个break points出错，因为您正在使用bootstrap columns所以我也将它们的断点视为您的。

1. 设备宽度= 992px
2. 设备宽度= 768px

因此，现在您必须在代码中添加以下代码行，

@media (max-width:991px){
  .padded{
     padding:30px;
  }
}

 @media (max-width:767px){
  .padded{
     padding:30px;
  }
}

这样您的最终工作代码将如下所示，

 body { background-color: red !important; } .padded { padding: 80px; } /* BOTONES */ button.btn { text-decoration: none; background-color: #5ba4e6; display: inline-block; text-align: center; vertical-align: middle; cursor: pointer; color: #fff; font-weight: 700; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); letter-spacing: 0; line-height: 1.2; -webkit-font-smoothing: antialiased; -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); -ms-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); -o-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); background-image: linear-gradient(to bottom, rgba(255, 255, 255, .09) 0%, rgba(0, 0, 0, .09) 100%); font-size: 1.4rem; padding: 22px 30px; border-radius: 6px; border: none; } button.btn:focus { outline: none; } @media (max-width:991px) { .padded { padding: 30px; } } @media (max-width:767px) { .padded { padding: 30px; } } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-md-6"> <h1>Mis Stickers</h1> <p>858 reviews</p> <img src="{{ product.image.url }}"> <p>Custom kiss cut stickers easily peel away from the backing. Print on the surrounding border as well as the stickers. Made from durable vinyl that resists scratching, heat, water and sunlight. </p> </div> <div class="col-md-6 col-xs-12 col-sm-12"> <div class="m-5 bg-white col-sx-12"> <div class="padded"> <form method="post"> <div id="size"> <legend class="text-size20 bold-font"> <label>Selecciona un tamaño</label> </legend> <ul class="form-items"> <li> <span> <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> <label>25 cm x 28 cm</label> </span> </li> <li> <span> <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> <label>30 cm x 28 cm</label> </span> </li> <li> <span> <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> <label>55 cm x 28 cm</label> </span> </li> <li> <span> <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> <label>36 cm x 28 cm</label> </span> </li> </ul> </div> <div id="quantity"> <legend class="text-size20 bold-font"> <label> Selecciona la cantidad</label></legend> <ul class="form-items"> <li> <span> <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> <label>100</label> </span> <span>$69</span> <span class="savings">Ahorra 39%</span> </li> <li> <span> <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> <label>200</label> </span> <span>$120</span> <span class="savings">Ahorra 77%</span> </li> <li> <span> <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> <label>300</label> </span> <span>$509</span> <span class="savings">Ahorra 60%</span> </li> </ul> </div> <button type="submit" class="btn btn-naranja text-white btn-block">Continuar</button> <a href="#" class="btn btn-naranja text-white btn-block">Continuar#}</a> </br> <p>Siguiente: subir imagen</p> </form> </div> </div> </div> </div>