制作响应式广告页面 html bootstrap答案

【问题标题】：Make responsive advertisement page html bootstrap制作响应式广告页面 html bootstrap
【发布时间】：2019-05-09 13:47:47
【问题描述】：

我正在从事营销项目，我希望允许客户配置他们的登录页面，其中将包含图像作为广告，页面布局将是这样的

--------------------------------------------------------------------------
|                Horizontal ADS AS IMAGE                                   |                       
--------------------------------------------------------------------------
|  V  |                                                              | V   |
|  E  |                                                              | E   |
|  R  |                                                              | R   |
|  T  |                       MAIN                                   | T   |
|  I  |                                                              | I   |
|  C  |                                                              | C   |
|  A  |                                                              | A   |
|  L  |                                                              | L   |

我尝试了很多但没有成功。手机打开的页面设计会很差，左竖图会显示在上横图下方，然后是主区，然后右竖图会显示在主区下方，我不知道如何让设计在主要部分中保留在计算机中，我将添加视频，所以请告诉我我该怎么做我尝试使用此代码，但正如我所说，当手机打开页面时设计会非常糟糕

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Layout Example</title>
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <div class="row">
   <div class="col-sm-6 col-md-8 col-lg-12">
            <img src="728x90.png"/>


	   </div>
   </div>
    <div class="row">
        <div class="col-sm-3 col-md-4 col-lg-2">
           <img src="fdf_9x_en.jpg" />
	   </div>
        <div class="col-sm-6 col-md-4 col-lg-8">
            <h2>CSS</h2>
            <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
            <p><a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
      
        <div class="col-sm-3 col-md-4 col-lg-2">
        <img src="fdf_9x_en.jpg" />
	  </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-sm-12">
            <footer>
                <p>&copy; Copyright 2013 Tutorial Republic</p>
            </footer>
        </div>
    </div>
</div>
</body>
</html>

fdf_9x_en.jpg 是垂直图像

【问题讨论】：

标签： html responsive-design bootstrap-4

【解决方案1】：

您使用的是 CSS 文件吗？您需要使用media queries，也可以使用CSS Grid，这将允许您指定事物如何缩小和增长，以及它们根据视口的百分比占用多少空间。希望这些链接能帮助您大致了解您需要进入的方向，因为仅查看 HTML 并没有太大帮助。

【讨论】：

感谢您的重播，但是这些 div 和文本示例在通过电话打开时，元素将位于彼此下方，这可能是因为元素是水平的，但是对于垂直图像我可以做什么，这将使垂直图像彼此下方，这是不可能的