Question

是否可以在引导表的td元素内对齐左边的彩色div？我可以使用没有引导程序的普通表来执行此操作，但是引导表似乎有问题，彩色div与侧面对齐。

我有什么：

没有引导程序会发生什么：

我想要什么

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"> 
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> 
</script>

<style>
    table td:last-child {
        border-left: 1px solid #bababa;
        padding: 0px;
    }

    table tr:last-child td:last-child {
        border-bottom: 1px solid #bababa;
    }

    body {
        background-color: #2c3034;
    }

</style>

</head>
<body>

<br />

<div class="container">

    <table class="table table-dark table-striped table-hover">
        <thead>
            <tr>
                <th>Year</th>
                <th>Data for Town</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%">2012</td>
                <td>
                    <div id="div1" style="background:#229ac1; width:30%;" class="container">jfiljfrei</div>
                    <div id="div2" style="background:#FF0000;" class="container">jfiljfrei</div>
                </td>
            </tr>
            <tr>
                <td>2014</td>
                <td>Minus</td>
            </tr>
            <tr>
                <td>2013</td>
                <td bgcolor="#FF0000"></td>
            </tr>
            <tr>
                <td>2014</td>
                <td>Minus</td>
            </tr>
            <tr>
                <td>2014</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

</body>
</html>

是否提供了我正在寻找的例子？引导表中是否有特定的东西需要删除以获得所需的结果？我很熟悉引导，所以一些帮助将不胜感激。

Answer 1

您无需进行太多更改只需从div1标记中删除class =“container”即可解决问题。

Answer 2

您只需将课程float-left添加到您的div。

请关注the documentation了解更多信息

以下是代码：

table td:last-child {
  border-left: 1px solid #bababa;
  padding: 0px;
}
table tr:last-child td:last-child {border-bottom: 1px solid #bababa;}
body {background-color: #2c3034;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"> 
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> 
</script>

</head>
<body>

<div class="container">

    <table class="table table-dark table-striped table-hover">
        <thead>
            <tr>
                <th>Year</th>
                <th>Data for Town</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%">2012</td>
                <td>
                    <div id="div1" style="background:#229ac1; width:30%;" class="container float-left">jfiljfrei</div>
                    <div id="div2" style="background:#FF0000;" class="container float-left">jfiljfrei</div>
                </td>
            </tr>
            <tr>
                <td>2014</td>
                <td>Minus</td>
            </tr>
            <tr>
                <td>2013</td>
                <td bgcolor="#FF0000"></td>
            </tr>
            <tr>
                <td>2014</td>
                <td>Minus</td>
            </tr>
            <tr>
                <td>2014</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

</body>
</html>

Answer 3

在div1上添加了m-0类，颜色为蓝色。由于容器类上的margin-right: auto;and margin-left: auto; css属性，它正在中心对齐。 m-0会移除其上的任何边距。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"> 
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> 
</script>

<style>
    table td:last-child {
        border-left: 1px solid #bababa;
        padding: 0px;
    }

    table tr:last-child td:last-child {
        border-bottom: 1px solid #bababa;
    }

    body {
        background-color: #2c3034;
    }

</style>

</head>
<body>

<br />

<div class="container">

    <table class="table table-dark table-striped table-hover">
        <thead>
            <tr>
                <th>Year</th>
                <th>Data for Town</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%">2012</td>
                <td>
                    <div id="div1" style="background:#229ac1; width:30%;" class="container m-0">jfiljfrei</div>
                    <div id="div2" style="background:#FF0000;" class="container m-0">jfiljfrei</div>
                </td>
            </tr>
            <tr>
                <td>2014</td>
                <td>Minus</td>
            </tr>
            <tr>
                <td>2013</td>
                <td bgcolor="#FF0000"></td>
            </tr>
            <tr>
                <td>2014</td>
                <td>Minus</td>
            </tr>
            <tr>
                <td>2014</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

</body>
</html>

将彩色div对齐到引导表的td元素内部的左侧

3 个答案: