Question

我一直在尝试将我的网站升级为移动支持的网站，我认为在途中学习Bootstrap是个好主意。我已经观看并阅读了许多教程，但我仍然对网格感到失望。这是我基本上要做的事情，它是一个简化版本的课程：

Layout

如您所见，我将在左侧添加一些条形图，产品将在右侧。我想在最小的设备中至少有2列，我想在其他设备上有3列。在这些列中，我将有多个条和产品。我尝试了许多没有成功的事情。我不是想要获取代码，就像我说它只是网站的一小部分，我正在努力理解它。

任何想法，示例或教程？

由于

Answer 1

为了更好地了解Bootstrap的网格，我建议您下载其中一个入门模板并检查源代码。它会让你清楚你所有的疑虑。你在这里有什么太通用了。

我会给你一个想法：

如果您希望大屏幕上的元素为4列，中型屏幕上为6列，小屏幕上为12列，则执行以下操作：

ng-repeat="item in dashboardCtrl.unAckAlertList | orderBy: 'urgent' | limitTo : 4 "

这将使您的网格立即响应。请尝试在不同的列上进行更好的理解。

Answer 2

对于列，我会查看此页面：http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp。除了@TheEarlyMan所说的，如果你想将列嵌套在彼此之内，你只需要在'container'div中创建另一个div，并确保列宽加起来为12.

例如，这里是我从这里修改过的一些代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <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.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Grid</h1>
  <p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>      
  <p>Resize the browser window to see the effect.</p>      
  <div class="row">
    <div class="col-sm-6" style="background-color:blue;">
        <div class="col-sm-4" style="background-color:purple;">
          First Column
        </div>
        <div class="col-sm-4" style="background-color:green;">
          Second Column
        </div>
        <div class="col-sm-4" style="background-color:yellow;">
          Third Column
        </div>
    </div>
    <div class="col-sm-6" style="background-color:red;">
        <div class="col-sm-6" style="background-color:pink;">
            Fourth Column 
        </div>   
        <div class="col-sm-6" style="background-color:lightblue;">
            Fifth Column
        </div> 

    </div>
  </div>
</div>

</body>
</html>

将其发布到文本框中并单击“试用”，您应该看到两列，蓝色和红色，每个列中都有一些嵌套列。蓝色有三列，红色有两列。

只是愚弄它，需要一些练习才能掌握它。

使用Bootstrap网格系统进行布局

2 个答案: