Question

我有一个模式从数据库中检索数据并在选项卡中显示它们。选项卡和选项卡内容是动态创建的。查看源代码，它似乎完美排列，所有类和层次结构但是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);
            }

        }

谢谢。

Answer 1

你确定你没有没有“Navs”的Bootstrap版本吗？ “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">

模态中的Bootstrap选项卡

1 个答案: