html - 如何为文本静音类向右浮动/向右拉动

Question

我正在尝试使文本静音类正确浮动。

向右浮动，向右拉。不工作

<table class="table table-bordered">
  <tbody>
     <tr>
        <th class="card-header" colspan="2"></th>
     </tr>
     <tr colspan="2">
        <td style="display: flex;">
           <strong>Username:</strong>&nbsp;&nbsp;A Comment
           <small class="form-text text-muted">5 mins ago</small>
           <br/>
        </td> 
     </tr>
  </tbody>
</table>

文本静音向右浮动或向右拉以获得更好的视图。

标签： htmlcssbootstrap-4

Answer 1

实际上，您在父元素中使用display: flex并且float无法正常使用它。有 2 个选项可以解决您的问题。

没有 Flex 选项 1：

从父元素中删除display: flex并添加带有text-muted类的float-right类。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<table class="table table-bordered">
  <tbody>
     <tr>
        <th class="card-header" colspan="2"></th>
     </tr>
     <tr colspan="2">
        <td>
           <strong>Username:</strong>&nbsp;&nbsp;A Comment
           <small class="form-text text-muted float-right">5 mins ago</small>
           <br/>
        </td> 
     </tr>
  </tbody>
</table>

使用 Flex 选项 2：

使用display: flex和justify-content: space-between并更新次要 HTML 结构。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<table class="table table-bordered">
  <tbody>
     <tr>
        <th class="card-header" colspan="2"></th>
     </tr>
     <tr colspan="2">
        <td class="d-flex justify-content-between">
           <div>
            <strong>Username:</strong>&nbsp;&nbsp;A Comment
           </div>
           <small class="form-text text-muted">5 mins ago</small>
        </td> 
     </tr>
  </tbody>
</table>