小编Bri*_*ian的帖子

我一直试图在我的网站上添加一个平滑的滚动功能一段时间,但似乎无法让它工作.

这是我的导航相关的HTML代码:

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="675">
  <div class="navbar-inner" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact-arrow">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->

这是我添加的JS代码:

<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script>

<script>
    $(document).ready(function(e) { …

我试图在首次加载网站时创建一个出现在可查看页面底部的导航栏,然后当用户向下滚动时,导航栏向上滚动,最终固定到顶部.我正在使用Bootstrap,就像这个网站一样,但我无法弄清楚这个网站是如何做到的.有帮助吗？

这是我试图效仿的导航栏的网站:http://www.blastprocessor.co.uk/

这是我的导航html和css代码:

HTML:

<div class="navbar navbar-fixed-top" id="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#service-link">Services</a></li>
                    <li><a href="#contact-link">Contact</a></li>
                </ul><!-- /.nav -->
            </div><!--/.nav-collapse -->
        </div><!-- /.container -->
    </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

这是我的CSS:

.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.navbar .nav > li a{
    color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav …

<form class="span6">
  <h2>Get In Touch</h2><br>
  <input class="span6" type="text" placeholder="Your first name" required>
  <input class="span6" type="text" placeholder="Your last name" required>
  <input class="span6" type="email" placeholder="Your email" required>
  <input class="span6" type="text" placeholder="Your phone number">
  <input class="span6" type="text" rows="3" placeholder="What's up?" required><br>
  <button type="submit" class="btn btn-primary">Submit</button>
  <button type="clear" class="btn">Clear</button>
</form><!--/.span6-->

这是我在Bootstrap中使用的表单.我正在尝试使我的最后一个输入字段跨越6列,向下3行,但它只显示为6列和1行.关于如何使我的输入框更大的任何想法？谢谢.

我正试图通过Bootstrap为我的导航栏添加一个投影,但我似乎无法弄明白.也许有人可以指出我正确的方向.我所看到的所有其他问题都被问到一个类似的话题,对于凌乱的代码有着令人难以置信的冗长反应,但必须有一个简单的方法来做到这一点,毕竟不是Bootstrap的重点.

这是我与导航相关的HTML:

<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="index.html">eService</a>
      <div class="nav-collapse">
        <ul class="nav pull-right">
          <li><a href="index.html">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Services
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Stage Design & Build</a></li>
              <li><a href="#">Event Planning & Management</a></li>
              <li><a href="#">Video Production</a></li>
              <li><a href="#">Audio Production</a></li>
              <li><a href="#">Lighting Production</a></li>
            </ul>
          </li><!-- dropdown -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Events
                  <b …

我的网站上有一个固定的导航栏,它位于顶部,链接可以将我带到页面下方的不同部分.但是,因为我的固定导航栏的高度为40px,所以每个部分的开头40px都会被掩盖.如何使用HTML或CSS将我的链接带到40px的位置？谢谢.

最近,我去我的导航栏来充当,是坚持我的页面的顶部后,我向下滚动到某一点,但是当我达到我的整个页面的内容导航栏闪烁底部的粘性导航栏,有时甚至消失.把它想象成一个会闪烁的旧电视,你最终会撞到一边停止闪烁.如何点击我的导航栏以阻止它闪烁. 这是我的网站,所以你可以看到闪烁的所有荣耀.

这是我的导航HTML:

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix">
  <div class="navbar-inner" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact-arrow">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->

这是我的JS:

<script>
    $(document).ready(function() {
        $('#nav-wrapper').height($("#nav").height()); …

我在Bootstrap网站上有一个简单的表单,但是在白色背景上不是基本的灰色文本,而是在灰色背景上需要白色文本.我能够处理灰色背景,但我似乎无法更改占位符或输入文本颜色.

一点JSFiddle动作.

这是我的HTML标记:

<div class="span6" id="email-form">
    <form name="contact-form" id="contact-form" method="post" action="form-processing.php">
        <input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
        <input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
        <textarea class="span6" name ="Message" id="Message" type="text" rows="10" placeholder="What services will you be requiring?" required></textarea><br>
        <button type="submit" class="btn btn-primary">Send</button>
        <button type="clear" class="btn">Clear</button>
    </form><!--/.span6-->
</div><!--/#email-form-->

这是我尝试的CSS,背景颜色更改工作,但不是占位符或文本.

#Email, #Fname, #Message{
    background-color:#666;
}
#Email placeholder, #Fname placeholder, #Message placeholder{
    color:#FFF;
}
#Fname text{
    color:#FFF;
}

我只希望我的导航栏按钮可见,而横跨整个页面的实际条形图具有完全不透明度.每当我更改导航栏的不透明度时,它都会影响其中的类,即使我指定这些类没有不透明度.

我发布了一张我想要复制的图片.如您所见,链接显示为完整,但导航栏不可见,允许显示完整的背景图像.它可能看起来像一个坚固的红色条,但我向你保证它是一个看不见的导航栏.

任何帮助将非常感激!谢谢.

这是我的导航栏HTML代码:

<div class="custom_nav">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </a>
                <a class="brand" href="index.html">Homegrown</a>
            <div class="nav-collapse">
                <ul class="nav nav-pills">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="index.html">About</a></li>
                    <li><a href="index.html">Contact</a></li>
                </ul><!-- /.nav -->
            </div><!--/.nav-collapse -->
            </div><!-- /.container -->
        </div><!-- /.navbar-inner -->
    </div><!-- /.navbar -->
</div><!--/.custom_nav-->

到目前为止,我已尝试使用以下内容编辑我的CSS:

ul .nav .nav-pills {background:rgba(255,255,255,0.5)}

.custom_nav {
    .navbar.navbar-fixed-top {
        background:rgba(255,255,255,.5);
    }
    .navbar .nav > .active a, .navbar .nav > .active a:hover, .navbar .nav > li …

我正在尝试将我的CSS文件与我正在处理的Wordpress网站的header.php文件链接起来,但是我遇到了一些麻烦.

有人告诉我这样设置:

<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">

以下是我目前的代码:

<link href="<?php bloginfo('/style.css');?>" rel="stylesheet">

但是,如果您查看网站的当前状态http://thenerdup.com,很明显CSS文件没有正确链接.

对于它的价值,这是我正在遵循的教程:http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial

我目前正在编辑标题.

谢谢你的帮助.