小编Mik*_*ike的帖子

全局 css 中的 react-pagination 样式不起作用

我只是在学习 react 并想使用 react-paginate 进行分页,但即使我已经将必要的 css 放在我的全局 css 文件(index.css)中,样式也无法在 atm 中工作

<div id="react-paginate">
    <ReactPaginate
        previousLabel={'<'}
        nextLabel={'>'}
        breakLabel={<a href="">...</a>}
        breakClassName={'break-me'}
        pageCount={pageCount}
        marginPagesDisplayed={2}
        pageRangeDisplayed={10}
        onPageChange={this.handlePageClick}
        containerClassName={'pagination'}
        subContainerClassName={'pages pagination'}
       activeClassName={'active'}
    /> 
</div>
Run Code Online (Sandbox Code Playgroud)

我的 css 文件

#react-paginate ul {
   display: inline-block;
   margin-left: 20px;
   padding-left: 0;
}

#react-paginate li {
   display: inline-block;
   border: 1px solid rgb(224, 224, 224);
   color: #000;
   cursor: pointer;
   margin-right: 3px;
   border-radius: 5px;
   margin-bottom: 5px;
}

 #react-paginate li a {
     padding: 2px 5px;
     display: inline-block;
     color: #000;
     outline: none;
 }

#react-paginate li.active …
Run Code Online (Sandbox Code Playgroud)

css pagination reactjs

3
推荐指数
2
解决办法
6088
查看次数

单击时导航栏滚动

<div class="navbar">
  <nav class="navbar navbar-dark bg-inverse navbar-fixed-top">
       <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">company name</a>
    </div>
    <ul class="nav navbar-nav navbar-right ">
      <li><a href="#" style="color:white;">About</a></li>
      <li><a href="#" style="color:white;">Portfolio</a></li>
      <li><a class="portfolio-scroll" href="#" style="color:white;" id="contact-nav">Contact</a></li>
    </ul>
</div>
</nav>
Run Code Online (Sandbox Code Playgroud)

我想让我的导航栏在点击导航栏中的选项之一时页面会滚动到页面中的特定部分,例如,当我点击导航栏上的联系人时,页面会向下滚动到同一页面中的联系人部分

如何制作这样的东西,有人可以帮助我吗?

html

1
推荐指数
2
解决办法
9429
查看次数

标签 统计

css ×1

html ×1

pagination ×1

reactjs ×1