如何使用 bootstrap 4 创建响应式主页？答案

【问题标题】：How create home page responsive with bootstrap 4?如何使用 bootstrap 4 创建响应式主页？
【发布时间】：2020-12-01 18:45:38
【问题描述】：

我想创建一个响应式布局，就像下图一样，带有 bootstrap 4 或其他支持。（全屏）

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <link href="~/Content/StyleSheet1.css" rel="stylesheet" />

</head>

<body>

    <div class="container">

        <div class="flex-row">
            <div class="col" style="background-color: blue;">Header</div>
        </div>

        <div class="flex-row">
            <div class="col-md-4" style="background-color: orange;">Left Nav</div>
            <div class="col" style="background-color: gray;">Content</div>
        </div>

        <div class="flex-row" style="background-color: green;">
            Footer
        </div>

    </div>

    @RenderBody()

</body>

</html>

.container 
{   height: 100%;
    width: 100%; }

对此有什么想法吗？

附言我使用 VS2019

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

我使用 bootstrap col 创建了您的设计。您可以根据需要修改高度，但您可以将此布局用于您的蓝图。有关更多信息，您可以查看：https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

  
  <div class="container-fluid">
    <!-- Control the column width, and how they should appear on different devices -->
    <div class="row">
      <div class="col-sm-12" style="background-color:yellow;height:200px">Header</div>
    </div>
    <br>
    <div class="row" style="height:450px">
      <div class="col-sm-4" style="background-color:yellow;">Left Navigation</div>
      <div class="col-sm-8" style="background-color:orange;">Content</div>
    </div>
    <br>
    <!-- Or let Bootstrap automatically handle the layout -->
    <div class="row">
      <div class="col-sm-12" style="background-color:yellow;height:225px">Footer</div>
    </div>
    <br>
    
</div>
</body>
</html>

【讨论】：

我看到你的很好，但你为什么不使用材料网格列表？这是更好的解决方案，你不需要在这里添加任何东西，你可以看到它在这个示例项目上是如何工作的 @987654322 @

【解决方案2】：

尝试关注，

<div class="container-fluid">
    <div class="flex-row">
        <div class="col" style="background-color: #5B9BD5;">Header</div>
    </div>
    <div class="flex-row">
        <div class="col-md-4" style="background-color: #ED7D31;">Left Nav</div>
        <div class="col" style="background-color: #A5A5A5;">Content</div>
    </div>
    <div class="flex-row" style="background-color: #70AD47;">
        Footer
    </div>
</div>

【讨论】：

感谢您的帮助，但您的解决方案不是全屏！