我正试着将这两个按钮水平地设置为相同的级别using bootstrap.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col mb-0">
          <h2>h2 text</h2>
          <h4>h4 text</h4>
          <h4>Another h4 text</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="text-center"><button>Button 1</button></div>
        </div>
        <div class="col mb-0">
          <h2>Right Div</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <button>Button 2</button>
        </div>
      </div>
    </div>
  </body>
</html>

Current the output is something like this. enter image description here

But I want to align the two buttons horizontally as below. enter image description here

任何帮助都将不胜感激.

编辑:我更喜欢不添加任何新元素的解决方案.如果可能,请仅使用 bootstrap .否则,请使用css.

推荐答案

您可以使用d-flex类来使列弯曲容器,并使用flex-Column类来将它们的弯曲方向设置为Column.此外,还添加了JUSTIFY-CONTENT-BETWEEN类,以在列的顶部和底部之间分配剩余空间.

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
  </head>
  <body>
<div class="container">
  <div class="row">
    <div class="col mb-0 d-flex flex-column justify-content-between">
      <div>
        <h2>h2 text</h2>
        <h4>h4 text</h4>
        <h4>Another h4 text</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="text-center"><button>Button 1</button></div>
    </div>
    <div class="col mb-0 d-flex flex-column justify-content-between">
      <div>
        <h2>Right Div</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="text-left"><button>Button 2</button></div>
    </div>
  </div>
</div>


  </body>
</html>

Html相关问答推荐

一次悬停可触发同一分区中的另一次悬停

我似乎不能正确地将我的导航栏居中'

如何在angular 17.2中使用routerLink解决此错误

如何使我的组织 struct 图的连接线响应?

在元素之间添加空格

创建一个带有div和径向渐变的全宽半圆

天使17:令人惊叹的动画

覆盖垫子中的边框底部 Select

风格规则应该适用于响应图像的哪些方面?哪种规则适用于<;图片和gt;,哪种规则适用于<;img>;?

使具有FLEX父项的溢出自动的子元素收缩

如果您将带有 html 标签的字符串数据(name : test) 放在 `

Swift WkMessageHandler 消息不发送

jQuery 索引返回不正确的结果

样式化单选按钮 背景 colored颜色

在DIV上应用梯度模糊未如预期工作

本地和在jsfiddle上页面工作正常,但在GitHub上无法运行.

两个span,一个在div居中,好像没有另一个,另一个在右边

发光效果html动画

当另一个 div 的高度改变或执行其内容的换行时,将 flex 方向更改为列

CSS:如何在模糊的背景上剪切文本?