自举柱系统答案

【问题标题】：Bootstrap Column System自举柱系统
【发布时间】：2022-01-12 16:13:50
【问题描述】：

提前感谢您的帮助！

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

我无法理解它是如何工作的！目前，我将整个框设置为 container-fluid，因此没有应用任何填充/边距，但我不明白如何构建列以使其正常工作。

这是我迄今为止尝试过的 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 占用了容器中的所有可用空间，因此我无法获得容器的完整高度，但我不确定还有什么其他方法可以做到。

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

谢谢，

【问题讨论】：

标签： html css bootstrap-4

【解决方案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>

【讨论】：

【解决方案2】：

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

要更好地理解它，请访问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>

【讨论】：