使用Bootstrap-4组织DIV内容

Question

我找不到使用Bootstrap对齐/组织div内容的解决方案。我不太明白它是怎么工作的

aling items-* text-* aling self-* justify-items- * justify-self- *

我正在尝试用以下方式组织我的网站：

​

​

但我无法对齐内容，使其完全连接到左边缘或右边缘，或者使内容处于左侧，无论是img、text还是位于其中心的另一个div。我想避免使用填充或页边距，因为我试图使一个响应性的内容，然后他们可能会给我其他问题。非常感谢你的帮助，问候。

Answer 1

这可能会帮助您开始：

使用fiddle解决方案

​

.MainDiv {
  border: 1px solid red;
  height: 210px;
  width: 100%;
  display: flex;
  margin: 5px;
}

.First {
  border: 1px solid blue;
  width: 33%;
  height: 200px;
  display: flex;
  justify-content: flex-start;
  margin: 5px;
}

.FirstSubDiv {
  border: 1px solid green;
  height: 200px;
  width: 50%;
}

.Second {
  border: 1px solid blue;
  width: 33%;
  height: 200px;
  display: flex;
  justify-content: center;
  margin: 5px;
}

.SecondSubDiv {
  border: 1px solid green;
  height: 200px;
  width: 50%;
  text-align: center;
}

.Third {
  border: 1px solid blue;
  width: 33%;
  height: 200px;
  display: flex;
  justify-content: flex-end;
  margin: 5px;
}

.ThirdSubDiv {
  border: 1px solid green;
  height: 200px;
  width: 50%;
  text-align: right;
}

<div class="MainDiv">
  <div class="First">
    <div class="FirstSubDiv">
      contents are in left;
    </div>
  </div>

  <div class="Second">
    <div class="SecondSubDiv">
      contents are in center;
    </div>
  </div>

  <div class="Third">
    <div class="ThirdSubDiv">
      contents are in right;
    </div>
  </div>

</div>

​

Answer 2

这里提供了您需要的所有信息：https://getbootstrap.com/docs/4.5/layout/grid/

开始时，您只需复制和粘贴引导程序html并对其进行调整即可。逐渐地，你会得到它的要点(在测试和试用之后)，并且你将能够自己工作。

编辑 https://getbootstrap.com/docs/4.0/utilities/flex/

查看附加的图像。如果这就是您要做的事情，请访问此link