语义用户界面：不同设备的不同文本对齐方式

Question

如何使用语义 UI 为移动设备和其他设备设置不同的对齐方式？我想在除手机以外的所有设备上将

Label

对齐。这可能吗？或者有什么解决方法吗？

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

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

Answer 2

这里有一个例子。您可以右键单击->查看页面源代码查看示例。

例子：

<div class="ui grid">
  <div class="three wide computer nine wide tablet six wide mobile column">
    <div class="ui segment">Content</div>
  </div>
[...]

重要说明：班级顺序在这里真的很重要。