我怎样才能使网格（设计）响应？答案

【问题标题】：how can i make grid (design) responsive?我怎样才能使网格（设计）响应？
【发布时间】：2018-06-14 06:45:48
【问题描述】：

我已尽一切努力使此设计具有响应性，但我一无所获

寻求帮助或建议会很棒..

谢谢

 <div class="box-section">
    <div class="box-container">
        <div class="box-inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sapiente, est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet.est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet. est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet.</p>
        </div>
    </div>
    <div class="box-container">
        <div class="box-inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sapiente, est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet.</p>
        </div>
    </div>
    <div class="box-container">
        <div class="box-inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sapiente, est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet.est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet. est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet.</p>
        </div>
    </div>
    <div class="box-container">
        <div class="box-inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sapiente, est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet.</p>
        </div>
    </div>
</div>

【问题讨论】：

使用可以帮助您的引导程序。它很容易使用。在您的代码中，您必须编写更多的 css，并且您还想编写媒体查询 css。

标签： html css twitter-bootstrap responsive-design frontend

【解决方案1】：

您可以为此使用media-queries。

这是一个如何在您的设计中使用媒体查询的示例：

JSFiddle demo

@media (max-width: 600px) {
  .box-container {
    width: 100%;
  }
  .box-inner {
    padding: 25px;
  }
}

(max-width: 600px) 表示当屏幕/浏览器大小的宽度为600px 或更小时，将应用或覆盖以下 CSS 规则。因此，如果您将.box-container 的宽度设置为 50%，然后在媒体查询中设置为 100%，.box-container 的宽度将为 50%，直到您的屏幕/浏览器大小达到 600 像素，然后它将变为宽度为 100%。

【讨论】：

嗨。实际上问题在于对齐方式..四个盒子完全掉下来了，我正试图在盒子后面做。
我不明白你的意思，你能再解释一下吗？
这是一个不同的问题，但我发现something 可能真的有帮助。不幸的是，我还不熟悉 Grid，祝你好运！

【解决方案2】：

试试这个 CSS。如果你想让它们都在同一行，让它们的宽度：25% 然后根据您的需要调整最小宽度。这是如何使用 flex 进行响应式设计的链接。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.box-section {
    display:flex;
    flex-wrap:wrap;
}

.box-container {
    position: relative;
    top: 0;
    width: 50%;
    min-width:450px;
    box-sizing: border-box;

    float: left;
    padding: 15px;
}

.box-inner {
    background-color: #f5f5f5;
    padding: 50px;
}

【讨论】：

嗨，吉尔伯特，谢谢，但我不希望盒子在同一行..我的意思是我不想要盒子之间的空间..你可以看到额外的空间在第二个盒子之后
哦，当然！检查一下，当视图达到一定大小时，使用媒体查询根据需要调整框。 jsfiddle.net/w1j7anvx/21