Question

感谢您的支持。我正在使用Bootstrap 4建立我的第一个网站。我了解Bootstrap有12列的概念，并且在构建站点时可视化这12列，因此我创建了以下代码...非常适合我的目的。它只是在页面顶部以不同的颜色显示所有两行。抱歉，我是个有视觉感的人。

'''

    <div class="row">
      <div class="col-sm-1" style="background-color: #975011"> 01 </div>
      <div class="col-sm-1" style="background-color: #ae5d14"> 02 </div>
      <div class="col-sm-1" style="background-color: #c56916"> 03 </div>
      <div class="col-sm-1" style="background-color: #dc7519"> 04 </div>
      <div class="col-sm-1" style="background-color: #e78228"> 05 </div>
      <div class="col-sm-1" style="background-color: #e98f3f"> 06 </div>
      <div class="col-sm-1" style="background-color: #ec9d56"> 07 </div>
      <div class="col-sm-1" style="background-color: #eda666"> 08 </div>
      <div class="col-sm-1" style="background-color: #efb077"> 09 </div>
      <div class="col-sm-1" style="background-color: #f1ba88"> 10 </div>
      <div class="col-sm-1" style="background-color: #f3c499"> 11 </div>
      <div class="col-sm-1" style="background-color: #f5ceaa"> 12 </div>
    </div>

''' 要建立这个网站，我要逐行进行。.第一行是标题栏，导航栏中的第二行，徽标栏，第三行是徽标栏，第四行是全角图像，依此类推。

我要弄清楚的是，使用引导程序构建此网站时，是否要逐行进行，是否需要定义每一列中的内容？。这是下面的一些代码...

当我查看google上的示例代码或其他内容时，我看不到人们采用这种方法...我在这里错误地使用了Bootstrap吗？

在下面的代码中您会注意到，我没有将导航栏放在行或列中（至少没有定义），但是它显示在正确的位置。

如果我能在这里找到一些指导和帮助的方法，那就太好了。先感谢您。

///我正在为每一行做这样的事情，以定义其中的内容。

<div class="row">

    <div class="col-sm-1 header_row"></div>
    <div class="col-sm-8 header_row"> Call us @ xxxx | info@example.com | <a href="http://www.example.com">Login </a> </div>
    </div>

    <div class="row">
        <div class="col-sm-12 logo_row_border">
        <img class="mx-auto d-block logo" src="images/logo.png">
    </div>

</div>

<nav class="navbar navbar-expand-sm justify-content-center">
    <ul class="navbar-nav">

        <li class="nav-item">
            <a class="nav-link" href="#">item1</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#">item2</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#">item3</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#">item4</a>
        </li>

    </ul>
</nav>

<div class="row">
    <div class="col-sm-12">

        <div class="jumbotron jumbotron-fluid">
            <img class="mx-auto d-block" src="images/img_001.jpg" style="width: 100%;height: 25%">
        </div>

    </div>
</div>

Answer 1

请使用下面的链接阅读有关网格系统规则的信息。前往https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp 阅读规则后，您可以使用以下链接中给出的示例开始构建自己的HTML页面 https://getbootstrap.com/docs/4.0/examples/

Answer 2

在整个网站中使用多种容器样式是否普遍？我的意思是在一个地方放一个“容器”而在另一个地方放一个“容器流体”完全可以吗？

这取决于您。您可以根据需要使用.container和.container-fluid。但是您不能按.container > .row > .column > .container-fluid所示的顺序使用。

此外，我还创建了一些很小的东西，以查看效果如何。 Boostrap提供了一个名为“ text-md-right”的类，据我所知，它应该使文本右对齐。让我展示我的示例代码。为什么我的'bg-success'中的文本不能正确对齐？

是的，它将仅在中型设备上对齐。如果您希望将其用于其他设备，只需使用.text-right

作为参考，请通过此链接https://imgur.com/MH9quRL.jpg

使用Bootstrap 4引用html中的行和列

2 个答案: