语义 UI：不同设备的不同文本对齐方式答案

【问题标题】：Semantic UI: Different text alignment for different devices语义 UI：不同设备的不同文本对齐方式
【发布时间】：2018-03-02 19:54:36
【问题描述】：

如何使用 Semantic UI 为移动设备和其他设备设置不同的对齐方式？我想在除手机之外的所有设备上将Label 对齐。这可能吗？或者有什么解决办法？

<table>
    <tr>
        <td class="right aligned tablet computer only">Label</td>
        <td>Value</td>
    </tr>
</table>

【问题讨论】：

标签： alignment responsive semantic-ui

【解决方案1】：

您可以使用网格和表格的变体。在网格中，您定义将在移动设备、平板电脑或计算机上显示的行。每个设备行都包含具有特定对齐方式的表格。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css" rel="stylesheet"/>

<div class="ui container">
   <div class="ui one column grid">

      <div class="mobile only row">
         <table class="ui celled table">
             <tbody>
             <tr class="right aligned">
              <td>Mobile</td>
              <td>Value mobile</td>
              </tr>
              </tbody>
          </table>
      </div>

      <div class="computer only row">
          <table class="ui celled table">
            <tbody>
              <tr class="left aligned">
              <td>Computer</td>
              <td>Value on computer</td>
              </tr>
             </tbody>
          </table>
      </div>
</div>
</div>

【讨论】：