Question

我正在尝试创建一个类似于上图所示的布局。我使用bootstrap 4，我已经创建了适当的行和列排列

override

我最大的问题是定义图像的大小。我希望他们能够保持一定的宽高比，并减小尺寸（同时保持比例）以适应较小的显示器。我尝试修复列的大小并设置图像尺寸以填充列，但这不起作用。还试图修改图像本身的大小使它们伸出网格。无论如何我还可以控制列包装的大小吗？

Answer 1

继承人的代码：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid  img-responsive"">
    <div class="row">
      <div class="col-sm-2 col-xs-2" > </div>
      <div class="col-sm-1 col-xs-1">
        <img src="1.jpg" class="img-responsive" >
      </div>
      <div class="col-sm-1 col-xs-1">
        <img src="2.jpg" class="img-responsive"  > </div>
      <div class="col-sm-8 col-xs-8"></div>
    </div>

    <div class="row">
      <div class="col-sm-2 col-xs-2"> </div>
      <div class="col-sm-1 col-xs-1"> <img src="3.jpg " class="img-responsive" ></div>
      <div class="col-sm-5 col-xs-5">text goes here </div>
      <div class="col-sm-4 col-xs-4" ></div>
    </div>
  </div>

</html>

            <script src="" async defer></script>
    </body>
</html>

你只是放了一些图片然后看看看小提琴：https://jsfiddle.net/tyu867tk/

在Bootstrap网格中布置带有文本的响应式图像

1 个答案: