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>

文本突变的向右浮动或向右拖动以获得更好的视图。

Answer 1

实际上，您在父元素中使用了 display：flex ，并且 float 无法正常使用。有两种方法可以解决您的问题。

没有Flex选项1：

从父元素中删除显示：flex ，并添加 float-right 类和 text-muted 类。

<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：空格并更新次要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>

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

1 个答案: