Question

这些天学习Bootstrap但遇到了一些困难。

我正在尝试使用Bootstrap ScrollSpy，但它似乎无法正常工作，我无法弄清楚原因。
如何在屏幕和移动设备中保持左栏固定。
点击链接后，如何保持活动状态？我正在使用＆＃34; active＆＃34;但似乎没有效果....

＆＃13;

html, body {
  height: 100%;
}

.container-fluid {
  height: 100%;
}

.row {
  height: 100%;
}

.row > .left-column,
.row > .right-column {
  padding: 40px;
}

.left-column {  
  background-color: #A10020;
  color: #fff;
}

#avatar, #social {
  text-align: center;
}

img {
  border: 1px solid #444;
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
  background-color: #fff;
}

.social-icon {
  font-size: 36px;
  padding: 0px 20px;
}

hr {
  background-color: #EDEDF5;
}

.navbar {
  text-align: center;
  font-size: 18px;
}

a.nav-link  {
  color: #fff;
}

a.nav-link:hover, 
a.active {
  color: #A10020 !important;
  background-color: #fff;
  font-weight: bold;
}

.right-column {
  padding: 50px;
  text-align: center;
}

.content {
  padding:50px;
  text-align: justify;
  position: relative;
}

#about, #portfolio {
  height: 100%;
}

@media screen and (min-width: 760px)
{
  .left-column {
    height: 100%;
    position: fixed;
  }
  
  .right-column {
    position: relative;
    margin-left: 40%;
    overflow-y: scroll;
    height: 100%;
  }
}

@media screen and (max-width: 760px)
{

  
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<body data-spy="scroll" data-target="#navigation" data-offset="50">  
<div class="container-fluid">
    <div class="row">
      <div class="col-lg-5 left-column">
        <div id="avatar">
        </div>  
        <hr/>
        <div id="navigation">
          <nav class="navbar">
            <ul class="nav">
              <li class="nav-item"><a href="#about" class="nav-link active">About</a></li>
              <li class="nav-item"><a href="#portfolio" class="nav-link">Portfolio</a></li>
            </ul>
          </nav>
        </div>
        <hr/>
      </div>
      <div class="col-lg-7 right-column">
        <div id="about">
          <h2>Welcome</h2>    
          <div class="content">

          </div>
        </div>
        <div id="portfolio">
          <h2>Portfolio</h2>
        </div>
      </div>
    </div>
  </div>
</body>

＆＃13;

Answer 1

Jquery必须在bootstrap js之前出现

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

Bootstrap ScrollSpy和链接无法正常工作

1 个答案: