2016-12-29 41 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">