如何使用行对齐来装饰Bootstrap网格布局的边距

编程问答 2022-08-11

问题描述

页面具有简单的两列Bootstrap布局：

<div class="container">
  <div class="row">
    <div class="col-sm">
      column 1
    </div>
    <div class="col-sm">
      column 2
    </div>
  </div>
</div>

Bootstrap会在窗口中心以相等的左右边距显示列。

:       | column 1    | column 2    |        :

要求是装饰边缘（竖线和冒号之间的区域）。装饰取决于行内容-并与行内容对齐。装饰是非必需元素，响应式布局可能会在小屏幕设备上裁剪或消除。最后一点挑战了我。

起初，我想到添加更多列，或将容器嵌入另一个容器中，然后在外部容器中放置装饰。但是（当然），Bootstrap将“装饰”列视为必不可少的内容。当屏幕上的房地产变得稀缺时，装饰会占用宝贵的空间。

是否可以告诉Bootstrap列不是必需的，装饰性的，只能在空间允许的情况下显示？

编辑

Ahmad Dalao要求提供屏幕截图。我已经提出了一些问题，并提出了警告，因为我不知道如何使它起作用。

下图是两个嵌套容器的渲染。父容器位于左边距和右边距的位置；这些是不必要的装饰性列。子容器位于内容列中。

enter image description here

<div class="container-fluid" style="background:white;margin:0;padding:0;">
  <div class="row"  style="margin:0;padding:0;">
    <div class="col-sm-2" style="text-align:right;border: 1px solid blue;margin:0;padding:0;">
       <img src="decoration-left-margin.png">
    </div>
    <div class="col-sm-8"   style="border: 1px solid blue;margin:0;padding:0;">
      <div class="container" style="border: 1px solid green;margin:0;padding:0;">
        <div class="row"  style="margin:0;padding:0;">
          <div class="col-sm-4" style="text-align:left;border: 1px solid orange;margin:0;padding:0;">
            <img src="decoration-left-content.png">
          </div>
          <div class="col-sm-8" style="text-align:right;border: 1px solid orange;margin:0;padding:0;">
            <img src="decoration-right-content.png">
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-2" style="text-align:left;border: 1px solid blue;margin:0;padding:0;">
       <img src="decoration-right-margin.png">
    </div>
  </div>
</div>

解决方法

在您的示例中，您在基本列上放置了.col-sm，但没有提及您希望装饰性列占用多少空间。

如果我假设装饰性柱子占用的空间与基本柱子所需的空间相同，则以下结构应为您提供所需的空间：

<div class="container">
    <div class="row">
        <div class="decorative col-sm d-sm-block d-none"></div>
        <div class="col-sm">
            column 1
        </div>
        <div class="col-sm">
            column 2
        </div>
        <div class="decorative col-sm d-sm-block d-none"></div>
    </div>
</div>

那两个装饰性的柱子要到很小的断点为止才占据任何空间。

enter image description here

enter image description here

演示： https://jsfiddle.net/davidliang2008/4j1u7q0f/16/

,

我的看法有所不同。参见enter image description here 

x

CSS是

<div class="container-fluid">
  <div class="row">
    <div class="col align-self-center d-none d-md-block text-right p-0">
      <img src="//placehold.it/240x48" class="pull-right" alt="">
    </div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis sequi suscipit quas nisi quae impedit hic iure aperiam eligendi,nam,nesciunt quaerat dolor ipsam amet temporibus provident,eius architecto soluta?</div>
    <div class="col">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum cumque veritatis eaque eius sed libero deleniti et,dignissimos ipsum. Qui quis doloremque illum saepe aspernatur autem tempora cum,reprehenderit consequatur!</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptates culpa voluptatem nobis sapiente ipsum corrupti delectus,consequatur quia temporibus dolore modi quasi libero dicta ratione nostrum soluta. Obcaecati,molestias.</p>
    </div>
    <div class="col align-self-center d-none d-md-block text-left p-0">
      <img src="//placehold.it/240x48" class="pull-left" alt="">
    </div>
  </div>
</div>

我将装饰柱隐藏到中等的断点。 https://codepen.io/Mikeritteronline/pen/YzqLVmm

然后使用负边距拉入图像。 Bootstrap没有内置实用程序。

我使用.pull-right{ margin-right: -2rem; } .pull-left{ margin-left: -2rem; } 将装饰器列垂直居中。 https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

bootstrap-4htmltwitter-bootstrap