发生移动样式错误答案

【问题标题】：Mobile styling error occurring发生移动样式错误
【发布时间】：2018-08-03 10:46:00
【问题描述】：

我有以下代码会产生移动样式错误（见图 1）：

<div class="left">
   <p>Ditt namn (obligatorisk)<br />                          
     [text* your-name]</p>
   <p>Din epost (obligatorisk)<br />
     [email* your-email] </p>
   <p>Ditt telefonnummer<br />
     [tel tel-621] </p>
   <p>Ämne<br />
     [select menu-101 include_blank "Konstruktions ritningar" "Visualisering" "Mjukvara utveckling" "Övrigt"]</p>
 </div>
 <div class="right">
   <p>Ditt meddelande<br />
     [textarea your-message] </p>
 </div>
 <p>[submit "Skicka"]</p

css是这样的：

.left, .right {display: inline-block; vertical-align: top; width:45%;}

在网站上看起来不错：

网址：http://byggprojektoren.se/kontaktaoss/

手机版图片；

我真的很困惑如何解决这个问题，因为我似乎已经尝试了所有方法。有人知道吗？

【问题讨论】：

您应该将所有相关代码添加到您的答案中，并可能提供一个小提琴
.left, .right {display: inline-block; vertical-align: top; min-width:45%;}
@Luca 我还没有解决这个问题。
@Pye 你贴的代码和我的一样吗？
@RinorM min-width 而不是 width

标签： css wordpress plugins

【解决方案1】：

添加一些媒体查询。这里给你一个开场白：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .right {
        clear: both;
        width: 100%;
    }
    .right textarea {
        width:100%;
    }
}

【讨论】：

我应该调整这些组件中的哪些，以便更正移动网站？
只复制整个块，它应该把它整理出来。

【解决方案2】：

您是否尝试过使用引导程序或基础网格系统？这里的问题似乎是您的宽度为 45%，并且元素只是相互挤压。

【讨论】：

嗨，我对此有点陌生，从未尝试过使用引导程序或基础网格系统。我会尝试再调整一下宽度。
如果你想让它同时在移动和桌面上工作，那么你应该看看其中一个，他们有很好的例子，然后在你掌握它之后，你就可以开始了使用媒体查询创建自己的网格。希望这是您使用引导程序的入门：bootply.com/Bwv4FpYEXS
谢谢。但我真的不确定如何解决我的问题？
将 col-sm-6 col-xs-12 类添加到具有 left 和 right 类的元素中，并将它们都放在一个 div 中，该 div 是一个类行。不要忘记下载并添加 bootstrap.css

【解决方案3】：

看起来您的代码按预期工作，但 .left 和 .right 的内容溢出了容器。如果在输入和文本区域上添加 width: 100% 和 box-sizing:border-box，它们的大小将正确调整。

input, textarea {
    width: 100%;
    box-sizing: border-box;
}

【讨论】：

嗨，我是否将它与 .left 和 .right 一起添加到 css 中？
新规则是什么意思:)？
.left, .right {display: inline-block;垂直对齐：顶部；宽度：45%;} 输入，文本区域 {宽度：100%;框大小：边框框；}