0

我正在使用.card以下内容，并且有一段时间得到“你喜欢这个”的文字。与元素.btn-links下方的Like 和 Comment 一致。hr

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
    <div class="card-body">
      <hr>
      <div>
        <button class="btn btn-link">Like</button>
        <span class="text-muted" style="">You liked this.</span>
        <button class="btn btn-link float-right">3  Comments</button>
      </div>
  </div>
</div>

我已经尝试了我能想到的一切。更改显示属性。使用边距或填充。调整字体高度。它都没有奏效。我不知道如何让它对齐，任何帮助将不胜感激。

我可能可以使用浮点数甚至 flexbox 让它工作，但这似乎太过分了，如果可能的话，我宁愿不这样做。谢谢。

4

2 回答 2

3

align-middle你错过了垂直对齐，在你的跨度上使用引导类。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
    <div class="card-body">
      <hr>
      <div>
        <button class="btn btn-link">Like</button>
        <span class="text-muted align-middle">You liked this.</span>
        <button class="btn btn-link float-right">3  Comments</button>
      </div>
  </div>
</div>

于 2019-10-07T10:42:39.963 回答
0

您可以使用此代码

        body {
            margin: 0;
            padding: 0;
        }
        .btn-link {
            font-weight: 400;
            color: #007bff;
            text-decoration: none;
            margin-top: -4px;
        }
    <div class="card mx-auto mt-5" style="width:500px">
        <div class="card-body">
            <hr>
            <div>
                <button class="btn btn-link">Like</button>
                <span class="text-muted" style="">You liked this.</span>
                <button class="btn btn-link float-right">3  Comments</button>
            </div>
        </div>
    </div>

于 2019-10-07T11:56:48.870 回答