Question

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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

1 个答案: