Html CSS:div在小屏幕上全宽显示不工作_Html_Css_Twitter Bootstrap_Bootstrap 4

Html CSS:div在小屏幕上全宽显示不工作

html css twitter-bootstrap bootstrap-4

Html CSS:div在小屏幕上全宽显示不工作,html,css,twitter-bootstrap,bootstrap-4,Html,Css,Twitter Bootstrap,Bootstrap 4,我需要在右边放置一个div。在大屏幕上，它能正确定位自身但在小屏幕中，选项和文本的位置偏右。我想在小型设备上扩展白色背景到全宽，中间有选项、文本和按钮。现在文本被剪切 CodePen: <div class="row"> <div class="col-md-6"> <h1>Mis Stickers</h1> <p>858 reviews</p> <img

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

但在小屏幕中，选项和文本的位置偏右。我想在小型设备上扩展白色背景到全宽，中间有选项、文本和按钮。现在文本被剪切

CodePen:

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

大屏幕：

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

小屏幕：

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

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>


错误标签
858次审查
定制的吻切贴纸很容易从背衬上脱落。在周围的边框上打印
作为
还有贴纸。由耐用的乙烯基制成，耐刮擦、耐热、防水和耐腐蚀
阳光
连续的


信号：亚红外成像

对于

xs

和

{property}{sides}-{size}

对于

sm、md、lg和xl

使用

{property}{sides}-{breakpoint}-{size}

格式命名类

尝试向您发送

m-md-5

（下图）：

对于

xs

和

{property}{sides}-{size}

对于

sm、md、lg和xl

使用

{property}{sides}-{breakpoint}-{size}

格式命名类

尝试向您发送

m-md-5

（下图）：

当您需要为特定屏幕大小使用一些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>


错误标签
858次审查
定制的吻切贴纸很容易从背衬上脱落。在周围的边框上打印
作为
还有贴纸。由耐用的乙烯基制成，耐刮擦、耐热、防水和耐腐蚀
阳光
连续的


信号：亚红外成像

有关更多信息，您可以访问此链接：

当您需要为特定屏幕大小使用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>


错误标签
858次审查
定制的吻切贴纸很容易从背衬上脱落。在周围的边框上打印
作为
还有贴纸。由耐用的乙烯基制成，耐刮擦、耐热、防水和耐腐蚀
阳光
连续的


信号：亚红外成像

有关更多信息，您可以访问此链接：

这是公平的，它不起作用。您已经在代码中编写了

plancss

，响应

css

代码在哪里

你有

.padded {
  padding: 80px;
}

在你的代码中，他是这个错误行为的责任人。所以你需要写一个响应的

css

来控制他的行为。我们称这种响应性css为

媒体查询

。您可以学习

媒体查询的基础知识

现在让我们来解决你的问题

您的html dom在两个

断点处出错，因为您使用的是引导列
我也将它们的断点作为您的断点
设备宽度=992px
设备宽度=768px
因此，现在您必须在代码中添加以下代码行
@media (max-width:991px){
  .padded{
     padding:30px;
  }
}

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

最后的工作代码是这样的

正文{
背景色：红色！重要；
}
.软垫{
填充：80px；
}
/*鲍通*/
button.btn{
文字装饰：无；
背景色：#5ba4e6；
显示：内联块；
文本对齐：居中；
垂直对齐：中间对齐；
光标：指针；
颜色：#fff；
字号：700；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文本阴影：0-1px0RGBA（0,0,0,25）；
字母间距：0；
线高：1.2；
-webkit字体平滑：抗锯齿；
-webkit盒阴影：插入0-2px0RGBA（0,0,0,15）；
-ms盒阴影：插入0-2px0RGBA（0,0,0,15）；
-moz盒阴影：插入0-2px0RGBA（0,0,0,15）；
-o形盒阴影：嵌入0-2px0RGBA（0,0,0,15）；
盒影：插入0-2px0RGBA（0,0,0,15）；
背景图像：线性渐变（至底部，rgba（255、255、255.09）0%，rgba（0、0、0.09）100%）；
字体大小：1.4rem；
填充：22px 30px；
边界半径：6px；
边界：无；
}
按钮。btn：焦点{
大纲：无；
}
@介质（最大宽度：991px）{
.软垫{
填充：30px；
}
}
@介质（最大宽度：767px）{
.软垫{
填充：30px；
}
}

错误标签
858次审查
定制的吻切贴纸很容易从背衬上脱落。打印在周围的边框和贴纸上。由耐刮、耐热、防水和阳光的耐用乙烯基制成。

塔马尼奥之旅


25厘米x28厘米


30厘米x28厘米


55厘米x28厘米