垂直对齐问题有两个div

Question

我在数据表中有两个div，我试图垂直对齐但有一些问题。我想让他们两个一致。

以下是问题的屏幕截图：

每个div都有一个类，即用于导出按钮.pull-left和用于分页.pull -right，css如下：

我尝试添加垂直对齐：中间或底部等，但没有任何区别..

.pull-right {
    float:right;
    display: inline-block;
    position: relative;
}
.pull-left {
    float:left;
    display: inline-block;
    position: relative;
}

以下是来自控制台的html代码的屏幕截图，这里有太多要粘贴的代码

这里也是我用于数据表的sDom参数：

"sDom": "<'row'<'col-sm-12'<'pull-right'p><'pull-left'B>r<'clearfix'>>>t<'row'<'col-sm-12'<'pull-left'i><'pull-right'><'clearfix'>>>",

Answer 1

有一些解决方案可以解决这个问题。但我想与您分享这些简单的解决方案。

首先： 使用引导列

`"sDom": '<"col-xs-6" B><"col-xs-6" p>'`

<强>第二

$(document).ready(function() {
    $('#example').DataTable( {
        "dom": '<"toolbar">frtip'
    } );
    $("div.toolbar").html('<b>add your buttons here</b>');
} );

第三或者你也可以这样做：

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'excel', 'pdf', 'print'
        ]
    } );
} );

  

注意：请记住添加按钮所需的脚本。

第四，使用 CSS ：

.dt-buttons.btn-group {
  margin-bottom: -50px; //specify the margin here...
}

Answer 2

使用float时，display属性不再是inline-block。在当前情况下，你必须指定宽度。 比如.pull-right {widht：30％} .pull-left {width：60％}

或者只是让它们显示没有float的内联块。只要它们不符合边缘它们就在同一条线上。

Answer 3

而不是使用pull-left＆amp; pull-right您可以对col-md-6个代码使用div课程。