如何创建使此布局响应？

Question

我是网络开发的新手，我正在尝试制作一个静态响应式网站。

到目前为止，我已经能够制作一个响应式导航栏，但我仍然不知道如何制作这种布局。

此布局在移动设备上应如下所示：

到目前为止，我在 bootstrap 网站上找到了这段代码，它会根据浏览器的宽度调整图像大小。

<img src="..." class="img-fluid" alt="...">

但是，我不知道如何在“图片”附近添加文字。如果我将“图像”和“文本”放在同一个 div 中，上面的代码会很奇怪。图像不会立即调整大小。看起来 div 的大小发生了变化，然后图像的大小也随之发生变化。

谁能帮我做这个布局？

Answer 1

我想您必须更好地使用 DIV 才能获得您想要的结果。想象一下，div 就像组织盒，您不想弄乱里面的东西。你可以这样做：

<div class="row">
  <div class="col-md-6">
    <img src="https://cdn.auth0.com/blog/new-bootstrap4/logo.png" class="img-fluid" alt="...">
  </div>
  <div class="col-md-6">
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="col-md-12 bg-warning">
      <p>empty text</p>
    </div>
    <div class="col-md-12">
    <img src="https://itriangletechnolabs.com/blog/wp-content/uploads/2020/05/bootstrap-illustration.png" class="img-fluid" alt="...">
    </div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12 bg-warning">
      <p>text</p>
    </div>
    <div class="col-md-12">
    <img src="https://socpub.com/sites/default/files/images-2018/Bootstrap.jpg" class="img-fluid" alt="..."> 
    </div>
  </div>
</div>

正如您在此 fiddle 中看到的那样：https://jsfiddle.net/xjohnatha/L34gb05r/1/（请记住调整拆分的 window 以使其响应）

Answer 2

只需相应地添加 bootstrap class :

total 12 columns in page so you have to divide accordingly 

mobile device use class : "col-xs-6" or "col-xs-12"// according to requirement
Small device use class : "col-sm-6" or "col-sm-12"
medium device use class : "col-md-6" or "col-md-12"
large device use class : "col-lg-6" or "col-lg-12"

<div class ="col-sm-6"> 
<img src="" />
</div>

<div class ="col-sm-6"> 
//text
</div>

// 留空 space 使用“col-sm-offset-6”，这样它会将一半容器留空，另一半留空元素。

如何创建使此布局响应？

How to create make this layout responsive?

html

css

twitter-bootstrap

responsive