Bootstrap 模态框内的标签

Question

我有一个模式可以从数据库中检索数据并将它们显示在选项卡中。选项卡和选项卡内容是动态创建的。查看源代码，一切似乎都安排得很完美，所有 class 和层次结构，但是 ul 中的 li 项目堆叠起来而不是水平对齐，我已经交叉检查了我的 html 标记和 bootstrap classes 但我似乎没有发现任何不应该存在或丢失的东西。

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

您确定您的 Bootstrap 构建没有 "Navs" 和 "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 模态框内的标签

Bootstrap tabs within modals

jquery

twitter-bootstrap

bootstrap-tabs