Question

我在Bootstrap中有像这张图片一样的数据表Jquery

看起来很好，但如果我调整浏览器大小（在移动网络上查看），图片就像这样

我很困惑，我试着把Widht manualy放在桌子上，但没有用。

在我再次回到全屏（PC）后，数据表不是这样的中心。

我尝试添加容器但仍无效。本代码：

public class test {

public static void main(String[]args){
    final Integer [] pickMove = {0,1,2,3,4,5,6,7};
    ArrayList<Integer> possibleMove=new ArrayList<Integer>();
    SecureRandom random = new SecureRandom();
    boolean response = false;
    int counter=0;

    possibleMove.addAll(Arrays.asList(pickMove));
    for(int i=0; i<pickMove.length && !response ; i++){
        System.out.println("arrayList size:" +possibleMove.size());

        int move=possibleMove.get(random.nextInt(possibleMove.size()));
        System.out.println("move picked: "+move);
        if(move==5){
            response=true;
            ++counter;
        }
        else{
            possibleMove.remove(move);
            ++counter;
        }

        for ( int j = 0; i < possibleMove.size(); j++ )
             System.out.printf( " %s", possibleMove.get( j ) );
    }

    System.out.println("# of Tries to get to 5: "+counter);
    }
}

任何人都可以帮助解决此问题。我是Bootstrap的新手。

提前谢谢。

Answer 1

您的问题可能是您没有将表包装在容器，行和列DIV中吗？因此宽度不是动态设置的。

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <table id="example">
                ...
            </table>
        </div>
    </div>
</div>

BTW。如果你可以设置一个jsFiddle，它将有助于快速回答。

更新的答案：

如果您只是尝试将表格对齐在父div的中心，那么可以使用CSS来完成。

#example {
    margin: 0 auto;
}

我在这里以jsFiddle为例：http://jsfiddle.net/DJRavine/cz1vpb1v/

Answer 2

如果没有看到你的实际表格代码就很困难，但是在移动设备上看起来很好的广泛表格是很棘手的。 Bootstrap有一个.responsive-table class，可以使表格在移动设备上水平滚动。

除此之外，我还会看到在移动尺寸上写入表格的样式，也尝试更改td宽度，这可能是罪魁祸首。

还尝试删除“dt-responsive”和“nowrap”

等类

如何在bootstrap上设置TD宽度表？

2 个答案: