Bootstrap on-the-fly 附加了 Javascript 的元素的响应高度

Question

对于原型网站，我已经下载了可以在该网站上找到的免费 bootstrap 模板：http://themes.3rdwavemedia.com/demo/prettydocs/index.html

正如您在模板的索引页上看到的那样，尽管内容很长，但六个项目框的大小都相同。如果我们用 Firebug 检查 DOM，我们可以看到每个项目框都定义为 div :

<div class="item item-green col-md-4 col-sm-6 col-xs-6">
    <div class=item-inner" style="height: 237px;">
        ...
    </div>
</div>

现在，当我编辑用模板包下载的 index.html 页面时，我发现那些项目 div 没有预定义的高度。属性似乎是在页面加载后添加的。

我想做的是根据一个参数让box列表动态化。根据此参数的值，可能有 2、3、7、15 个框，每个框都有特定的图标、颜色、标题、内容和 link.

在 index.html 文件中，我已将以下 onLoad 方法 link 添加到个人 Javascript 文件中：

<body class="landing-page" onload="addItemBoxes()">

然后，在我的 Javascript 文件中，我有一些函数来定义要添加的框列表，然后我使用循环调用这样的函数：

function addBox(boxId) {
    var boxDetails = getBoxDetails(boxId);
    /*
    Example of boxDetails content : 
    {
        boxId : "1",
        boxTitle : "Cars",
        boxDescription : "This is a page that talks about cars",
        boxIcon : "fa-automobile",
        boxIconSource : "font-awesome",
        boxLink : "cars.html"
    }
    */

    if (boxDetails) {
        //Main div
        var cardsWrapperDiv = document.getElementById("cards-wrapper");

        //Get color from the global var
        var nbrOfItems =  cardsWrapperDiv.getElementsByClassName("item").length;
        var nbrOfColors = COLORS.length;
        var colorIndex = nbrOfItems % nbrOfColors;
        var color = COLORS[colorIndex];

        //Create the box
        var itemDiv = document.createElement("div");
        itemDiv.className = "item " + color + " col-md-4 col-sm-6 col-xs-6";

        //Content of the box
        var innerItemDiv = document.createElement("div");
        innerItemDiv.className = "item-inner";

        //Icon
        var iconHolderDiv = document.createElement("div");
        iconHolderDiv.className = "icon-holder";
        if (boxDetails.boxIconSource == 'font-awesome') {
            var i = document.createElement("i");
            i.className = "icon fa " + boxDetails.boxIcon;
            iconHolderDiv.appendChild(i);
        } else if (boxDetails.boxIconSource == 'elegant_font') {
            var iconSpan = document.createElement("span");
            iconSpan.setAttribute("aria-hidden", "true");
            iconSpan.className = "icon " + boxDetails.boxIcon;
            iconHolderDiv.appendChild(iconSpan);
        } else {
            console.log("No icon!");
        }        
        innerItemDiv.appendChild(iconHolderDiv);

        //Title
        var h3 = document.createElement("h3");
        h3.className = "title";
        h3.innerText = boxDetails.boxTitle;
        innerItemDiv.appendChild(h3);

        //Description
        var p = document.createElement("p");
        p.className = "intro";
        p.innerText = boxDetails.boxDescription;
        innerItemDiv.appendChild(p);

        //Link
        var a = document.createElement("a");
        a.className = "link";
        a.href = boxDetails.boxLink;
        var span = document.createElement("span");
        a.appendChild(span);
        innerItemDiv.appendChild(a);

        itemDiv.appendChild(innerItemDiv);
        cardsWrapperDiv.appendChild(itemDiv);
    }
}

除了盒子没有指定样式高度外，代码工作正常。当我用 Firebug 检查它们时，我看到它们的定义如：

<div class="item item-green col-md-4 col-sm-6 col-xs-6">
    <div class=item-inner">
        ...
    </div>
</div>

因此，它们的高度取决于内容的长度，这一点都不漂亮...

我怀疑高度是由 index.html 代码底部引用的脚本之一指定的：

<script type="text/javascript" src="assets/plugins/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-match-height/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>

但我不知道如何调用它们才能解决高度问题。非常感谢您的帮助！

Answer 1

如果您想使用 javascript 将样式添加到 div 中，您可以使用：

//Content of the box
var innerItemDiv = document.createElement("div");
innerItemDiv.className = "item-inner";
innerItemDiv.style.height="237px"; // This is the line to add

没有测试代码，但我认为它应该可以工作。

Answer 2

您可以尝试自动溢出，或使用 bootstrap 元素 class names/ids 来调整大小。还有做 nedia 查询的选项

Answer 3

我在与模板关联的 main.js 脚本中找到了那几行：

/* ======= jQuery Responsive equal heights plugin ======= */
/* Ref: https://github.com/liabru/jquery-match-height */

 $('#cards-wrapper .item-inner').matchHeight();
 $('#showcase .card').matchHeight();

如果我在我的个人 addBox 函数末尾添加两个 jquery 调用，它就可以工作。所有新盒子的尺寸都差不多，如果屏幕尺寸发生变化，会适当调整。

谢谢大家的帮助。

Bootstrap on-the-fly 附加了 Javascript 的元素的响应高度

Bootstrap on-the-fly responsive height for elements appended with Javascript

javascript

css

twitter-bootstrap

responsiveness