模式中的引导程序选项卡

Question

我有一个模态，可以从数据库中检索数据并在选项卡中显示它们。选项卡和选项卡内容是动态创建的。查看源似乎完美地布置了，所有类和层次结构，但是UL中的Li项目正在堆叠而不是水平对齐，我交叉检查了我的HTML标记和Bootstrap类，但我似乎没有找到任何不应该在那里或缺少任何东西的东西。

这是我使用jQuery

创建的HTML标记

这是我的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);
            }
        }

谢谢。

Answer 1

您确定没有" navs"＆amp;" Navbar"组件？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">