Bootstrap 列系统

Question

在此先感谢您的帮助！

我在 bootstrap 4 个网站建设中工作，我正在尝试构建以下设计：

我不知道它是如何工作的！目前我将整个盒子设置为容器流体，因此没有应用任何 padding/margins，但我不明白如何构建列以使其工作。

这是我的 HTML 目前为止我尝试过的方法：

                 <div class="container-fluid">
                  <div class="row">
                    <div class="col-12">
                      <h3 class="mega-menu-heading">About</h3>
                    </div>
                        <div class="col-sm-3 g-pa-0">
                          <ul class="list-unstyled style-list">
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert]</a></li>
                          </ul>
                        </div>
                        <div class="col-sm-3 g-pa-0">
                          <ul class="list-unstyled style-list">
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                          </ul>
                        </div>
                        <div class="col-sm-3 g-pa-0">
                          <ul class="list-unstyled style-list">
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                          </ul>
                        </div>  
                        <div class="col-sm-3 g-pa-0">
                          <img class="img-responsive g-pa-0 g-ma-0" src="/assets/images/misc/nav-image.jpg">
                        </div>                                
                  <!--/end row--> 
                </div>
                </div>

我知道 col-12 占用了容器中所有可用的 space，所以我无法获得容器全高的图像，但我不确定还有什么其他方法可以做到这一点.

任何帮助将不胜感激，这一定是可能的我可能只是遗漏了一些东西！

谢谢，

Answer 1

您可以创建包含 2 列的第一行：col-sm-9 和 col-sm-3。

然后在 col-sm-9 中创建另一行以列出您的服务并使用 col-sm-3 显示您的图像。

div {
  text-align: center;
  background-color: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.2);
}

.bgimg {
  background-image: url('https://mdn.mozillademos.org/files/7693/catfront.png');
  background-size: contain;
  background-repeat: no-repeat;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-9">
      <div class="row">
        <div class="col-sm-12">Our services</div>
        <div class="col-sm-4">Service 1</div>
        <div class="col-sm-4">Service 2</div>
        <div class="col-sm-4">Service 3</div>
        <div class="col-sm-4">Service 4</div>
        <div class="col-sm-4">Service 5</div>
        <div class="col-sm-4">Service 6</div>
      </div>
    </div>
    <div class="col-sm-3 bgimg">
      Image full-height
    </div>
  </div>
</div>

Answer 2

您可以使用 bootstrap 网格系统。使用容器、行和列模式。

要更好地理解它，请转到此 link。

试试这个代码结构：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="container text-center">
  <div class="row">
    <div class="col-9">
      <div class="row">Our Services</div>
      <div class="row">
        <div class="col-4">Service 1</div>
        <div class="col-4">Service 2</div>
        <div class="col-4">Service 3</div>
      </div>
      <div class="row">
        <div class="col-4">Service 4</div>
        <div class="col-4">Service 5</div>
        <div class="col-4">Service 6</div>
      </div>
    </div>
    <div class="col-3">
      <img src="https://source.unsplash.com/100x100/?documents" class="img" alt="img">
    </div>
  </div>
</div>

Bootstrap 列系统

Bootstrap Column System

html

css

bootstrap-4