Bootstrap 3：使面板的文本换行在图标

Question

查看较旧的问题here我希望当面板被挤压时，文本将包裹在下方右侧对齐的图标。

以下是我到目前为止所做的代码：

<div class="container">
  <div class="panel panel-default">
    <table class="table table-hover">
      <tbody>
        <tr>
          <td>
            <span class="glyphicon glyphicon-file"></span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </td>
          <td class="text-right text-nowrap">
            <button class="btn btn-xs btn-info">CCS</button>
            <button class="btn btn-xs btn-warning">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

任何想法甚至使用除panel bootstrap 3之外的其他类也将被考虑 小提琴here或

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="panel panel-default">
    <table class="table table-hover">
      <tbody>
        <tr>
          <td>
            <span class="glyphicon glyphicon-file"></span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </td>
          <td class="text-right text-nowrap">
            <button class="btn btn-xs btn-info">CCS</button>
            <button class="btn btn-xs btn-warning">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

如果您丢失了桌子并转到div，您可以使用bootstraps响应网格系统并根据需要推/拉列。要在折叠时使文本对齐，您可以重复文本并根据屏幕隐藏/显示：https://jsfiddle.net/4j6fpfk2/1/

<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-2 col-sm-push-10 text-right">
          <button class="btn btn-xs btn-info">CCS</button>
          <button class="btn btn-xs btn-warning">
            <span class="glyphicon glyphicon-trash"></span>
          </button>
        </div>  
        <div class="col-sm-10 col-sm-pull-2 col-xs-12">
          <div class="visible-xs text-right">
            <span class="glyphicon glyphicon-file"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
          <div class="hidden-xs text-left">
            <span class="glyphicon glyphicon-file"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>   
      </div>
    </div>
  </div>
</div>

如果您不想重复文本，还可以创建一个基于媒体查询更改对齐属性的类