2016-12-29 26 views
2

我有一種模式,它從數據庫中檢索數據並將它們顯示在標籤中。標籤和標籤內容是動態創建的。看看源代碼,它似乎都是完美安排的,但是所有的類和層次結構都是ul內的li項目堆疊而不是水平對齊,我交叉檢查了我的html標記和引導類,但我似乎沒有發現任何不該在那裏或任何東西丟失的東西。模塊中的引導標籤

This is my html markup created using jquery

下面是創建的標籤我的jQuery代碼。

$.ajax({ 
     url: 'getevent', 
     type: 'post', 
     data: {'date':[$(this).html(),$("#date").html()]}, 
     success: function(response){ 
      var response = $.parseJSON(response); 
      console.log(response === null); 
      if(response!==null){ 
       var loopIndex = 1; 
       var ul=document.createElement("ul"); 
       var tabContent = document.createElement("div"); 
       $(ul).addClass("nav nav-tabs"); 
       $(tabContent).addClass("tab-content"); 
       $.each(response,function(index,object){ 
        //create a tab for each event and add them to modal 
        var li = document.createElement("li"); 
        var a = document.createElement("a"); 
        $(a).attr({'href':'event'+loopIndex,'data-toggle':'tab'}).html(object.title); 
        $(li).append(a); 
        $(ul).append(li); 
        var tabPanes = document.createElement("div"); 
        if(loopIndex==1){ 
         $(li).addClass('active'); 
         $(tabPanes).addClass("active in"); 
        } 
        $(tabPanes).addClass("tab-pane fade"); 
        $(tabPanes).attr('id','event'+loopIndex); 
        $(tabPanes).html("<p>"+object.discription+"</p>"); 
        $(tabContent).append(tabPanes); 
        loopIndex++; 
       }); 
       $("#modal-body").html(""); 
       $("#modal-body").append(ul); 
       $("#modal-body").append(tabContent); 
      } 

     } 

謝謝。

回答

0

您確定沒有「Navs」&「Navbar」組件的Bootstrap版本嗎? http://getbootstrap.com/customize/

嘗試使用這個CSS:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">