Question

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

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

代码笔：

大屏幕：

小屏幕：

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

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

尝试m-md-5（下图）：

image

Answer 2

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

from flask import request
...
allow_origin_list = ['https://example.com', 'http://example.com']

if 'HTTP_ORIGIN' in request.environ and request.environ['HTTP_ORIGIN']  in allow_origin_list:
    response.headers.add('Access-Control-Allow-Origin', request.environ['HTTP_ORIGIN'] )
    response.headers.add('Access-Control-Allow-Headers', 'access-control-allow-origin,content-type')
    response.headers.add('Access-Control-Allow-Methods', 'GET,POST')

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

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

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

Answer 3

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

您有

.padded {
  padding: 80px;
}

在您的代码中，他是对此行为负责的人。因此，您要编写一个响应式css来控制他的行为。我们将此响应式CSS称为media queries。您可以学习media queries here.

的基础知识

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

由于您使用的是break points，因此您的html dom在两个bootstrap columns中出了错，我也把它们当作断点。

设备宽度= 992px
设备宽度= 768像素

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

@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>

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

3 个答案: