学习引导：列堆叠，调整大小时需要新行堆叠答案

【问题标题】：Learning bootstrap: column stacking, need new row to stack when resizing学习引导：列堆叠，调整大小时需要新行堆叠
【发布时间】：2016-12-13 00:49:56
【问题描述】：

我正在努力学习 Angular 和 Bootstrap 以获得可能的工作，所以我正在制作一个简单的演示页面。调整大小时，我无法在前一行的最后一个 div 之后堆叠新行。我有一个全尺寸的页面如下所示：

Picture|Text|Btn|Btn <- Row 1
[  hidden div      ]
|   12 point col   | <- Row 2

现在，当我缩小尺寸时会发生以下情况：

Picture
|Text12 p col|
Btn
Btn

我希望元素像这样堆叠：

Picture
Text
Btn
Btn
|12 pt col|

请看下面的代码。我确信有些基本的东西我仍然不知道。我对列类型不太挑剔，我只是希望堆叠能够工作。

<div class="container-fluid" id="mainFrame" ng-controller="mainController">
      <div class="row" id="row1">
        <div class="col-sm-2">
          <img src="img/blah.jpg">
        </div>
        <div class="col-sm-4" id="nameplate">
          <p>Lorem Ipsum</p>
          <p>sit amet dolor</p>
          </br>
          <p>Demo Page</p>
          <p>Frameworks: Angular and Bootstrap</p>
        </div>
        <div class="col-sm-3"><div class="btn" id="bluebtn"><p>Push Me!</p></div></div>
        <div class="col-sm-3"><div class="btn" id="redbtn"><p>Push Me!</p></div></div>
      </div>

<!-----------------Top of hidden row-------------------------->
<div class="jumbotron container-fluid" ng-show="false"></div>

<!-----------------Top of row 3-------------------------->


<div class="col-sm-12"><p>Test</p><p>Blah</p><p>Blah</p></div>


</div>

这是我的 CSS：

img
{
    height:30vh;
    padding:1vh 1vw;
    position:relative;
    top:8vh;

}


div
{
    border: 1px solid black;
}

.row div
{
    height:100%;

}

.row div div
{
    height:30px;
}

#nameplate
{
    vertical-align: bottom;
    margin: auto;
    text-align:center;

}

#nameplate p
{
    margin:2vh 2vw;

}

#mainFrame
{
    height: 100%;

}

感谢任何帮助！谢谢。

【问题讨论】：

请做一个小提琴，以便我们更轻松地编辑您的代码
我发现了 (js)fiddle 是什么，但我无法让它工作。我无法获得我需要的库（Angular、Bootstrap）来工作或复制问题。很抱歉我帮不上什么忙。我是 Web 开发的初学者。我的世界是软件。
可以获取库，看左侧菜单
我想我已经让库工作了，但是 jsfiddle 并没有像我的浏览器一直在运行（或根本没有调整大小）。恐怕我太缺乏经验，无法承担这个项目。回到我的软件。谢谢大家，您的帮助！

标签： html css angularjs twitter-bootstrap

【解决方案1】：

您需要为不同的屏幕尺寸添加不同的列规范。这负责响应行为。你可以在下面看到工作代码sn-p--

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Secure Login: Protected Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          </head>
          <body>

<div class="container-fluid" id="mainFrame" ng-controller="mainController">
      <div class="row" id="row1">
        <div class="col-sm-2 col-md-2 col-lg-2 ">
          <img src="img/blah.jpg">
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4" id="nameplate">
          <p>Lorem Ipsum</p>
          <p>sit amet dolor</p>
    
          <p>Demo Page</p>
          <p>Frameworks: Angular and Bootstrap</p>
        </div>
        <div class="col-sm-3 col-md-3 col-lg-3"><div class="btn" id="bluebtn"><p>Push Me!</p></div></div>
        <div class="col-sm-3 col-md-3 col-lg-3"><div class="btn" id="redbtn"><p>Push Me!</p></div></div>
      </div>

<!---Top of hidden row-->
<div class="jumbotron container-fluid" ng-show="false"></div>

<!---Top of row 3-->


<div class="col-sm-12 col-md-12 col-lg-12"><p>Test</p><p>Blah</p><p>Blah</p></div>


</div>
</body>
  </html>

【讨论】：