Bootstrap 4 - 将元素对齐到其容器的底部

问题描述 投票:0回答:1

我试图找到答案,但没有运气,我自己也尝试过一些东西。我在一行中有两列,我想将第二列的底部div(三个按钮组)垂直对齐到行容器的底部,即#control-panel。

目前第二列居中对齐(垂直),这就是为什么三个按钮没有连接到容器的底部。

另外我附上一张图片,以便更容易看到Attached image

 <div id="control-panel">
    <div class="container">
      <div class="row">

        <div class="col-lg-3">
          <div class="display-4 p-3"><h2>Step 3:</h2></div>
          <p>Add a contact form, if you like, so people can contact you!</p>
          <a href="" class="btn btn-primary">Show contact form</a>
        </div>
        <div class="col-lg-3 d-flex flex-column">
          <div class=" p-3"><h2>Step 4:</h2></div>
            <p>Pick a style for your website</p>
            <div class="btn-group align-self-bottom">
              <button class="btn btn-primary" type="button">Style 1</button>
              <button class="btn btn-secondary" type="button">Style 2</button>
              <button class="btn btn-primary" type="button">Style 3</button>
          </div>
        </div>
      </div>
    </div>
  </div>

容器的CSS只是:

#control-panel {
height: 200px
}

我尝试使用'align-self-bottom'或'align-self-end'作为'btn-group'类,我想将它对齐到底部,但它会根据我的需要水平移动而不是垂直移动。

非常感谢任何建议

twitter-bootstrap alignment
1个回答
0
投票

检查这个StackBlitz:FlexBox example

enter image description here

HTML文件:

<div class="main-container">
  <div class="first-column">

  </div>

  <div class="second-column">
    <div class="buttons">

      <button>Button1</button>
      <button>Button2</button>
    </div>
  </div>
</div>

CSS文件:

.main-container {
  border-color: red;;
  border-style: solid;
  height: 100px;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.first-column {
  border-color: blue;;
  border-style: solid;
  height: 100px;
  width: 100px;
}

.second-column {
  border-color: green;;
  border-style: solid;
  height: 100px;
  width: 100px;
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  height: 100px;
}

我在这里使用flexbox创建一个主容器(红色)和两个内部列(蓝色和绿色),然后在第二列中创建两个按钮并将它们对齐到容器的底部。

© www.soinside.com 2019 - 2024. All rights reserved.