时间戳

首页 > 解决方案 > 对齐某些东西但保持响应的最佳方法是什么

html - 对齐某些东西但保持响应的最佳方法是什么

问题描述

链接到我的代码以查看问题：https ://jsfiddle.net/0sbcdfLk/2/

我正在使用引导响应式登录表单模板，我也将其用于登录屏幕的设计。我已经复制了代码的 formContent 部分两次，所以我现在有 2 个容器，但我希望第二个容器通常与左侧对齐，并在移动设备上直接位于下方。

我可以将其与边距对齐到左侧，但这会使移动设备上的设计混乱。响应式设计的最佳实践是什么？这是我正在使用的确切引导模板https://bootsnipp.com/snippets/X2bG0

我已经复制了这部分代码

    <div id="formContent">
<!-- Tabs Titles -->

<!-- Icon -->
<div class="fadeIn first">
  <img src="https://www.b-cube.in/wp-content/uploads/2014/05/aditya-300x177.jpg" id="icon" alt="User Icon" />
  <h1>Aditya News</h1>
</div>

<!-- Login Form -->
<form>
  <input type="text" id="login" class="fadeIn second" name="login" placeholder="username">
  <input type="text" id="password" class="fadeIn third" name="login" placeholder="password">
  <input type="submit" class="fadeIn fourth" value="Log In">
</form>

<!-- Remind Passowrd -->
<div id="formFooter">
  <a class="underlineHover" href="#">Go to the Site</a>
</div>

我可以在底部添加一种样式，该样式margin: -50% 0px -6px -95%适用于 PC，但在移动设备上它基本上是屏幕的一半并且溢出了第一个表单。

标签： htmlcssbootstrap-4

解决方案

使用“CSS @media”规则。按窗口宽度拆分 CSS。您可以为不同的设备屏幕尺寸定义@media 规则，以适应移动设备、平板电脑、PC、宽屏。使用它们，您可以像往常一样操纵一切。在 HTML 中为表单内容 div 设置类（有多个 ID，即使使用一次，类也更适合样式化）：

<div id="formContent" class="account-details">

添加媒体规则以在足够宽的屏幕上显示左侧的表单：

@media only screen and (min-width: 1400px) {
  .account-details{
    position: absolute !important;
    left: 0;
    margin-left: -150px;
  }
}

编辑：工作示例https://jsfiddle.net/y2sgobLz/

推荐阅读