Question

我的问题是我无法在我的网站上使用Twitter引导程序而它在小提琴中完美无缺：http://jsfiddle.net/Mns8q/32/

谁能告诉我这是什么问题。提前谢谢。

此代码出现在您访问我网站中的网址时调用的视图中，该网址与小提琴相同：

<!DOCTYPE html>
<html>

  <head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.js" ></script>

<style>
@import url('http://psestest.hubvents.com/assets/css/bootstrap.css');
 body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;

  .frame {
    position: absolute;
    width: 200%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;

    .navbar .navbar-inner {
      border-radius: 0;
      padding-left: 5px;
    }

    .menu {
      height:100%;
      /* background-color: #3D6AA2; */

      &.collapse {
        float:left;
        height: 100% !important;
        width: auto;
      }

      &.collapse.height {
        position: relative;
        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.35s ease;
        -moz-transition: height 0.35s ease;
        -o-transition: height 0.35s ease;
        transition: height 0.35s ease;
      }

      &.collapse.width {
        position: relative;
        width: 0;
        overflow: hidden;
        -webkit-transition: width 0.35s ease;
        -moz-transition: width 0.35s ease;
        -o-transition: width 0.35s ease;
        transition: width 0.35s ease;
      }

      &.collapse.in.width {
        width: auto;
      }

      &.collapse.in.height {
        height: auto;
      }

      .collapse-inner {
        position: relative;        
        width: 250px;
        height: 100%;
      }

      .navbar .navbar-inner {
        text-align: center;
        color: grey;
        font-size: 1.2em;
        line-height: 38px;
      }

      .nav-stacked {
        padding: 0 10px;
      }

    }
    .view {
      width: 50%;
      height: 100%;
      overflow: hidden;

      .navbar .navbar-inner .btn-navbar {
        display: block;
        float: left;
      }
      #contentm {
        margin: auto 15px;
        text-align: justify;
      }
    }
  }
}

</style>
<script  type="text/javascript">
$(document).ready(function() {
changeContent = function(key) {
  html = textHash[key];
  $('#contentm').html(html);
}

$("#menu a").click(function(e) {
  $('#menu').collapse('hide');
  changeContent(e.target.innerText);
});

textHash = {
  "Futurama": "<h1>Bendin' in the Wind</h1><p>Oh, but you can. But you may have to metaphorically make a deal with the devil.  And by \"devil\", I mean Robot Devil.  And by \"metaphorically\", I mean get your coat. Say what? Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages! Michelle, I don't regret this, but I both rue and lament it.</p>",
  "Star Wars": "<h1>The Empire Strikes Back</h1><p>Remember, a Jedi can feel the Force flowing through him. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time!</p>",
  "Doctor Who": "<h1>The Poison Sky</h1><p>Stop talking, brain thinking. Hush. You hit me with a cricket bat. You've swallowed a planet! Stop talking, brain thinking. Hush. It's a fez. I wear a fez now. Fezes are cool. Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you?</p>"
};
});
</script>

  </head>

  <body>
    <div class="frame">
      <div id="menu" class="menu nav-collapse collapse width">
        <div class="collapse-inner">
          <div class="navbar navbar-inverse">
            <div class="navbar-inner">
              Menu

            </div>
          </div>
          <ul class="nav nav-tabs nav-stacked">
            <li><a>Futurama</a></li>
            <li><a>Star Wars</a></li>
            <li><a>Doctor Who</a></li>
          </ul>
        </div>
      </div>
      <div class="view">
        <div class="navbar navbar-inverse">
          <div class="navbar-inner">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#menu">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
        </div>
        <div id="contentm">
          Integer eu quam et lacus luctus molestie.
        </div>
      </div>
    </div>
  </body>

</html>

Answer 1

当您使用jsfiddle时，您的网站上似乎没有使用SCSS。

您可以按如下方式重新编写CSS：

@import url('http://psestest.hubvents.com/assets/css/bootstrap.css');

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.frame {
    position: absolute;
    width: 200%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
}

.navbar .navbar-inner {
    border-radius: 0;
    padding-left: 5px;
}

.collapse-inner {
    position: relative;        
    width: 250px;
    height: 100%;
}

.navbar .navbar-inner {
    text-align: center;
    color: grey;
    font-size: 1.2em;
    line-height: 38px;
}

.nav-stacked {
    padding: 0 10px;
}

.view {
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.navbar .navbar-inner .btn-navbar {
    display: block;
    float: left;
}

#contentm {
    margin: auto 15px;
    text-align: justify;
}

.menu {
    height:100%;
}

.collapse {
    float:left;
    height: 100% !important;
    width: auto;
}

.collapse.height {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.35s ease;
    -moz-transition: height 0.35s ease;
    -o-transition: height 0.35s ease;
    transition: height 0.35s ease;
}

.collapse.width {
    position: relative;
    width: 0;
    overflow: hidden;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

.collapse.in.width {
    width: auto;
}

.collapse.in.height {
   height: auto;
}

Twitter Bootstrap不在CodeIgniter网站上工作，但在小提琴中工作

1 个答案: