Как плавать вправо / тянуть вправо для текстового приглушенного класса - PullRequest
0 голосов
/ 28 сентября 2019

Я пытаюсь заставить текст с отключенным звуком плавать правильно.

Плавай направо, тяни направо.Не работает

<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>

Приглушенный текст всплывает вправо или вправо для лучшего обзора.

1 Ответ

0 голосов
/ 28 сентября 2019

На самом деле вы используете display: flex in родительский элемент и float не работает с ним должным образом.Есть 2 варианта решения вашей проблемы.

Без Flex Option 1:

Удалить display: flex из родительского элемента и добавить float-right class с text-muted class.

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...