使我的网站具有响应能力（在任何电话，台式机上）

Question

我是HTML，CSS的新手，我正在尝试为我的项目创建一个网站，但是其中一项要求是它应该是响应式网站。 由于某些原因，我的黄色框变得越来越小，与红色和蓝色框不同，当我单击智能手机查看，笔记本电脑视图和其他视图时，红色和蓝色框很大，只是黄色框变得越来越小。我希望o寻求帮助或建议，以使其成为一个响应迅速的网站，谢谢您

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="row">
    <div class="col-md-4" style="margin-left: 3%"  >
      <div class="color">Column 1</div>
      <div class="color" >Column 2</div>
    </div>
    <div class="col-md-8">Column 3</div>
  </div>
  <style type="text/css">
    .color:nth-child(1) {
    background:red; 
    height:40%;
    margin-top:5%;
    margin-left: 2%;
    border-radius: 4%;
    width: 100%;    
}
 .color:nth-child(2) {
    margin-top: 3%;
    border-radius: 4%;
    background:blue; height:260px;
} 
.col-md-8 {
    background:yellow; height:628px;
    width: 38%;
    margin-left: 15%;
    margin-top: 1%;
    border-radius: 9%;
}

  </style>

Answer 1

我不知道这将是一个什么样的网站，但是请尝试使用“最小宽度”而不是黄色栏中的常规“宽度”

Answer 2

红色和蓝色实际上都是响应性的，但是由于它们设置为100％的宽度，因此看起来他们什么都没做。尝试将它们的宽度设置为与黄色相同的宽度，您会看到它们确实起作用。

Answer 3

简短答案：

由于col-md-8覆盖中的width：38％css属性，一切都能按预期进行。

长答案：

第一个选项： 您想做的是创建自己的单独的类，这样您就不会直接覆盖bootstrap类

第二个选项： Bootstrap很可能已经为您的用例准备好了所有类，因此请尝试完全不要编写自己的CSS并从Bootstrap中重用实用程序类，请参见： https://getbootstrap.com/docs/4.0/layout/grid/

https://getbootstrap.com/docs/4.1/layout/utilities-for-layout/

https://getbootstrap.com/docs/4.1/utilities/spacing/

请记住适当的html文档布局，为方便起见，这里是bootstrap入门模板：

https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template

然后将css放置在文档中的适当位置： https://www.w3schools.com/css/css_howto.asp

Answer 4

我建议您在以下网站上学习HTML和CSS课程：

https://www.freecodecamp.org/和https://www.codecademy.com/catalog/language/html-css

它们都是免费的，因此在使用引导程序之前先熟悉基本的HTML和CSS。这些课程还介绍了如何以所需的方式使页面具有响应性，并且您将更加了解自己的工作方式和操作方式。