如何在 Bootstrap 的列顶部对齐文本？答案

【问题标题】：How can I align text on top of a column in Bootstrap?如何在 Bootstrap 的列顶部对齐文本？
【发布时间】：2021-04-25 03:32:16
【问题描述】：

这是我的代码和网站截图。如何在左侧对齐文本“按钮将显示如下页面”但与图片开头的高度相同？

<div class="col-sm-9">
        <div class="well">
          <h4>Item Price</h4>
          <span class="align-baseline";><img src="https://picsum.photos/200" class="img thumbnail" align="middle"/>
            button will show a page as below</span>
        </div>
</div>

我说的是第一栏！

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

好的，我明白了：

<div class="col-sm-9">
        <div class="well">
          <h4>Item Price</h4>
          <div id="image" style="display:inline;">
           <img src="https://picsum.photos/200"/>
           </div>
           <div id="texts" class="logo"; style="display:inline whitespace:nowrap;">
               A very long text(about 300 words)
           </div>
        </div>
</div>

我的 CSS 类：

.logo{
    position: relative;
    top: -70px; /* This will move it 20px up */
    left: 20px; /* This will move it 20px to the right */
  }

感谢回答this问题的Drown

【讨论】：

【解决方案2】：

您可以使用而不是使徽标位置相对

margin-top:-70px
margin-left:20px

此任务不推荐绝对位置。

【讨论】：