Question

我正在学习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%;

}

任何帮助表示赞赏！谢谢。

Answer 1

您需要为不同的屏幕尺寸添加不同的列规范。这是响应行为的原因。您可以在下面看到工作代码段 -

<!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>

学习bootstrap：列堆叠，在调整大小

1 个答案: