Question

我有两张桌子，我想将一张桌子左右对齐 - 另一张桌子右侧 - 但我遇到了一些麻烦。

这是我的代码：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<?php

    print
    "<div class='container'>".
        "<table class='table'>".
        "<tr>".
            "<th class='text-left'>Product Shot</th>".
            "<th class='text-center'>Product Description</th>".
            "<th class='text-center'>Quantity</th>".
            "<th class='text-center'>Total</th>".
        "</tr>".
    "</table>";

    print 
        "<tr>".
            "<td><b>Grand total: </b></td>".
            "<td><strong>'TOTAL'</strong></td>".
            "<td>".
                "<a href='#'><button class='btn btn-success'> Checkout</button></a>".  

                "<a href='remove_all_items.php'><button class='btn btn-danger'> Remove </button></a>".  

                "</a>".
            "</td>".
    "</tr>";

?>

甚至可以在同一页面上有两个表格，其中一个在左边，另一个在右边，并且响应并向下滚动？

我如何实现这一目标？

由于

Answer 1

你可以这样试试：

<body>
<div class="container">
    <div class="row">
        <div class="col-xs-6">
        <table>
            <tr>
                <td>left</td>
                <td>left</td>
            </tr>
        </table>
        </div>
        <div class="col-xs-6">
        <table>
            <tr>
                <td>right</td>
                <td>right</td>
            </tr>
        </table>
        </div>
    </div>
</div>
</body>

Answer 2

尝试使用!important代码制作css类

示例：

txtleft
{
   text-align:left !important;
}
txtryt
{
   text-align:right !important;
}
txtcent
{
   text-align:center !important;
}

并尝试将其放入您的课程

某些引导类正由其父类继承。但是使用!important代码;它不会被父母改变

希望它有所帮助...

如何将一个表左对齐，一个对齐BOOTSTRAP

2 个答案: