2017-02-18 232 views
0

我不是一個bootstrap專家(根本就不是),我有點卡在這裏與另一個崩潰崩潰不起作用。崩潰內崩潰不起作用

一個簡單的崩潰運作良好:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<li> 
 
    <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-sitemap"></i> Vos sites <i class="fa fa-fw fa-caret-down"></i></a> 
 
    <ul id="demo" class="collapse"> 
 
    <li> 
 
     <a href="/main">Level 1</a> 
 
    </li> 
 
    </ul> 
 
</li>

,並給它這樣的:

enter image description here

但是當我做添加另一個級別的同樣的事情這個崩潰樹。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<li> 
 
    <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-sitemap"></i> Vos sites <i class="fa fa-fw fa-caret-down"></i></a> 
 
    <ul id="demo" class="collapse"> 
 
    <li> 
 
     <a href="/main">Level 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="javascript:;" data-toggle="collapse" data-target="#demo_2"><i class="fa fa-fw fa-sitemap"></i> Level 2 <i class="fa fa-fw fa-caret-down"></i></a> 
 
     <ul id="demo_2" class="collapse"> 
 
     <li> 
 
      <a href="/main"> sublevel1</a> 
 
     </li> 
 
     <li> 
 
      <a href="/main"> sublevel2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</li>

而且古怪它給出了這樣的!

enter image description here

誰能告訴我,爲什麼我沒有對能級爲1級相同的顯示?

COMPLETE

我使用引導3

+1

你所說的「顯示」是用'CSS'完成的,但是你提供的代碼並不包含任何css。添加一個演示問題的完整代碼/工作示例。 – Dekel

+0

@Dekel我沒有使用任何自定義CSS,只是引導3 – farhawa

+0

我剛剛編輯您的代碼片段鏈接到所需的庫,似乎一切工作正常。也許2級是爲了和Vos網站相提並論?你在談論縮進嗎? –

回答

1

這裏是只有引導3
工作的例子正如你可以看到它的工作原理完全如預期:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
<ul> 
 
<li> 
 
    <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-sitemap"></i> Vos sites <i class="fa fa-fw fa-caret-down"></i></a> 
 
    <ul id="demo" class="collapse"> 
 
     <li> 
 
      <a href="/main">Level 1</a> 
 
     </li> 
 
     <li> 
 
      <a href="javascript:;" data-toggle="collapse" data-target="#demo_2"><i class="fa fa-fw fa-sitemap"></i> Level 2 <i class="fa fa-fw fa-caret-down"></i></a> 
 
      <ul id="demo_2" class="collapse"> 
 
       <li> 
 
        <a href="/main"> sublevel1</a> 
 
       </li> 
 
       <li> 
 
        <a href="/main"> sublevel2</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</li> 
 

 
</ul>

您示例中的顏色顯示您使用某個/某些額外的css文件。