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>