Question

我创建了一个系统，我在自定义col-md-

中将通知显示为引导程序面板

这是功能：

function showBootstrapNotification(notificationTitle, notificationContent, notificationColor, notificationSize) {
    console.log('trying to execute notification');

    var notificationArea = $('#notification_area');
    var notificationHtml = '';
    notificationHtml += '<div class="col-md-' + notificationSize + ' col-centered" style="margin-top: 6%;">';
    notificationHtml += '<div class="draggable panel panel-pink">';
    notificationHtml += '<div class="panel-heading" style="background-color: ' + notificationColor + '">';
    notificationHtml += notificationTitle;
    notificationHtml += '</div>';
    notificationHtml += '<div class="panel-body">';
    notificationHtml += notificationContent;
    notificationHtml += '</div>';
    notificationHtml += '</div>';
    notificationHtml += '</div>';

    const newNot = $(notificationHtml);
    notificationArea.prepend(newNot);
    newNot.draggable();
}

我想知道的是，我怎样才能将相册叠加在一起？我还需要阻止他们移动他们我关闭某个col-md并重新定位其他的。

我想我正在寻找的是一种决定我希望我的面板有多宽的方法，而不是专门定位并将列放在彼此之下等等。我只是想在顶部堆叠多个柱子彼此。

我尝试了什么？

.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
    position: absolute;
}

这会堆叠它们，但由于某种原因，它搞砸了面板体背景的高度。

Answer 1

如果您希望它们垂直堆叠，只需删除float ..

.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
    float:none;
}

但是这样覆盖Bootstrap并不是一个好习惯，所以我会使用像float-none这样的自定义类，只需将其添加到列中即可。

.float-none {
    float:none;
}

http://www.codeply.com/go/l1XNBUMRNA

堆叠引导列（col-md- *）

1 个答案: