Question

我正在使用页面上的语义UI侧边栏进行导航。默认情况下，我希望用户可以看到它，如果他们愿意，可以关闭它。问题是，通过默认打开侧边栏，我的页面内容被推离屏幕并且溢出，因此页面的一部分被切断。在文档中没有看到任何关于使页面内容符合可用宽度而不是被推离屏幕的内容。

$('.toggler').on('click', function() {
	$('.ui.sidebar').sidebar('toggle');
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic UI Sidebar test</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css">
</head>
<body>
  <div class="ui left sidebar inverted vertical menu visible pushable">
  <a href="#" class="item">Sidebar Link</a>
</div>
<div class="ui pusher">
  <div class="ui menu">
    <a class="item toggler">
      Toggle
    </a>
    <div class="item header">
      Semantic UI
    </div>
      <div class="menu right">
          <a href="#" class="item">Test</a>
      </div>
  </div>
  <div class="ui segment">
    <table class="ui celled table">
  <thead>
    <tr><th>Header</th>
    <th>Header</th>
    <th>Header</th>
  </tr></thead>
  <tbody>
    <tr>
      <td>
        <div class="ui ribbon label">First</div>
      </td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
  <tfoot>
    <tr><th colspan="3">
      <div class="ui right floated pagination menu">
        <a class="icon item">
          <i class="left chevron icon"></i>
        </a>
        <a class="item">1</a>
        <a class="item">2</a>
        <a class="item">3</a>
        <a class="item">4</a>
        <a class="icon item">
          <i class="right chevron icon"></i>
        </a>
      </div>
    </th>
  </tr></tfoot>
</table>
  </div>
</div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
  
</body>
</html>

Answer 1

看看Examples section for Sidebar docs。我认为你有两个选择：

使用<div class="ui left sidebar inverted vertical menu visible scale down">
使用overlay css课程在内容上显示侧栏：<div class="ui left sidebar inverted vertical menu visible overlay">

Answer 2

解决此问题的另一种方法是添加几个填充：

＆＃13;

.pushable > .ui.fixed.menu {
  padding-left: 260px;
}

.pushable > .ui.main.container {
  padding-left: 260px;
  padding-top: 40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css" rel="stylesheet"/>

<div class="pushable">
  <div class="ui visible left vertical menu sidebar overlay">
    <div class="header item">Logo/Company Name</div>
    <a href="#" class="item">Link #1</a>
    <a href="#" class="item">Link #2</a>
    <a href="#" class="item">Link #3</a>
  </div>
  <div class="ui top fixed menu">
    <div class="ui fluid container">
      <div class="left menu">
        <a href="#" class="item">Menu #1</a>
        <a href="#" class="item">Menu #2</a>
      </div>
      <div class="right menu">
        <a href="#" class="item">Menu #3</a>
        <a href="#" class="item">Menu #4</a>
      </div>
    </div>
  </div>
  <div class="ui main fluid container pusher">
    <h1 class="ui header">Content</h1>
    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then </p>
  </div>
</div>

＆＃13;

P.S。此代码段存在垂直滚动问题，因为无法为pushable元素设置body类。

Answer 3

我在Semantic-UI-React中花了相同的时间

据我了解，Semantic-UI的补充工具栏组件仅用于在移动设备上显示用于导航的临时菜单栏。它不是设计为固定的仪表板菜单。

我已经尝试过“覆盖”，“缩小”，“推” ..效果，但是它们都没有正确显示我的组件，我也不想深入探讨CSS的详细信息，例如“ transform：translate3d”属性。

因此对于仪表板；我只是简单地编码了一个Grid，然后在左侧将Menu组件垂直放置，然后在右侧将内容放置。

现在，我正在为移动尺寸准备不同的布局，该布局将使用Semantic-UI侧边栏具有“覆盖”功能。

Answer 4

您可以保持所有其他代码相同，只需更改初始化侧边栏的方式。

Temperature Range:\s*(^\d*.*\)$)

使用侧边栏停止溢出内容的语义UI

4 个答案: