用图像显示比例div的正确方法

Question

我正在尝试实现此布局。 我有父div（lightgray），里面有两个div。

左div（灰色）里面有方形图像。图像应涵盖所有div。右边div有一些文字标签和3个按钮。这个按钮位于按钮组div内部，在iPhone上处于纵向模式，有时它们不需要放在一行中，而是放在另一行中。

我应该使用哪些css规则或引导类？

Answer 1

您应该学习使用Bootstrap网格系统。您应该在其中创建一个包含列的容器。您可以针对每种屏幕尺寸对它们进行不同的显示。例如，这个div在超小型设备上是全宽的（屏幕宽度<768px），在中型台式机上的宽度的一半（≥992px）。

<div class="col-xs-12 col-md-6">Hello</div>

你应该阅读有关网格系统的内容，一切都将清晰。

Bootstrap Grid System

此外，使用响应实用程序显示/隐藏不同屏幕尺寸的元素：

Responsive utilities

Answer 2

您应该使用Bootstrap媒体查询来实现

看看here：

Answer 3

＆＃34;有时他们需要不是一行而是另一行＃34;

您是否可以使用 CSS媒体查询的组合来证明您希望代码更改的像素，然后添加display: block;代码来制作它们元素在彼此之下？

@media (max-width: 600px) {
  .whatever {
    display: block;
  }