2013-03-22 92 views
2
工作

我的问题是,我不能让Twitter的引导在我的网站 工作,而它的工作原理在小提琴完美的罚款:http://jsfiddle.net/Mns8q/32/Twitter的引导不是笨网站工作,但在拨弄

谁能告诉我是什么问题。? 在此先感谢。

此代码存在于当你在我的网站,这是一样的小提琴到达网址被称为视图:

<!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> 
+0

是什么,'我不能让Twitter的引导来work'意味着:

如下您可以重新写你的CSS?脚本/样式没有被加载?该功能的某些部分不能按预期工作?你可能必须更具体。 – Jeemusu 2013-03-22 09:58:22

+0

你在服务器上使用scss吗?您的样式未被加载。 – Jeemusu 2013-03-22 10:08:48

回答

1

看来,您不使用SCSS您的网站,而你在jsfiddle上。

@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; 
} 
+0

或者,我使用此工具将scss转换为css: http://cssconvert.mgwebsolutions.net。它正在工作.. – Aditya 2013-03-22 10:23:17