css Bootstrap无法识别按钮组的最后一个子项,如何修复？

h43kikqp 于 2023-04-13 发布在 Bootstrap

关注(0)|答案(3)|浏览(120)

这是一个小而麻烦的问题。我的按钮组的最后一个按钮是矩形的-而不是右上角和右下角的圆形。原因是这样的：除了a.btn元素之外，btn-group还有一个modal，在Bootstrap看来，* 是 * 组的最后一个子元素。modal由最后一个按钮调用，所以为了方便起见，我希望它留在那里，而不是四处移动，在某个时候丢失它（或者很难找到）

**你认为我应该做些什么来确保我的按钮组的最后一个按钮的正确样式？**我的意思是我当然可以手动添加这个属性，style="border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem，从而覆盖Bootstrap的CSS，但它很难看。也许，我可以手动分配最后一个孩子？简单地在开始标记中输入“lastchild”，例如，这将是一个相对不错的解决方案（可惜我不能这样做）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>Admin Page</title>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <table class="table table-hover text-center">
                      <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Last name</th>
                                <th scope="col">Department</th>
                                <th scope="col">Buttons</th>
                            </tr>
                      </thead>
                      <tbody>
                            <tr>
                                <td>John</td>
                                <td>Doe</td>
                                <td>IT</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                            <tr>
                                <td>Jane</td>
                                <td>Doe</td>
                                <td>HR</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                     </tbody>
              </table>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

css

来源：https://stackoverflow.com/questions/75954685/the-last-child-of-a-button-group-is-not-recognized-by-bootstrap-how-do-i-fix-it

3条答案

按热度按时间

pftdvrlh1#

你可以使用bootstrap的border-radius工具来实现这个功能。只需要在最后一个按钮中添加rounded-right bootstrap类，而不是内联css。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>Admin Page</title>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <table class="table table-hover text-center">
                      <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Last name</th>
                                <th scope="col">Department</th>
                                <th scope="col">Buttons</th>
                            </tr>
                      </thead>
                      <tbody>
                            <tr>
                                <td>John</td>
                                <td>Doe</td>
                                <td>IT</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary rounded-right" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                            <tr>
                                <td>Jane</td>
                                <td>Doe</td>
                                <td>HR</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary rounded-right" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                     </tbody>
              </table>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

赞(0）回复(0）举报 2023-04-13

wf82jlnq2#

在我看来，推翻Bootstrap的CSS并使用:last-of-type伪类是完美的解决方案。

.btn-group a:last-of-type {
    border-top-right-radius: 0.2rem !important;
    border-bottom-right-radius: 0.2rem !important;
}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <style>
.btn-group a:last-of-type {
border-top-right-radius: 0.2rem !important;
border-bottom-right-radius: 0.2rem !important;
}
        </style>
        <title>Admin Page</title>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <table class="table table-hover text-center">
                      <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Last name</th>
                                <th scope="col">Department</th>
                                <th scope="col">Buttons</th>
                            </tr>
                      </thead>
                      <tbody>
                            <tr>
                                <td>John</td>
                                <td>Doe</td>
                                <td>IT</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary rounded-right" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                            <tr>
                                <td>Jane</td>
                                <td>Doe</td>
                                <td>HR</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary rounded-right" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                     </tbody>
              </table>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

赞(0）回复(0）举报 2023-04-13

rta7y2nd3#

您也可以使用a.btn.btn-outline-primary类作为解决方案。

a.btn.btn-outline-primary {
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>Admin Page</title>

<style>
a.btn.btn-outline-primary {
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}

</style>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <table class="table table-hover text-center">
                      <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Last name</th>
                                <th scope="col">Department</th>
                                <th scope="col">Buttons</th>
                            </tr>
                      </thead>
                      <tbody>
                            <tr>
                                <td>John</td>
                                <td>Doe</td>
                                <td>IT</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                            <tr>
                                <td>Jane</td>
                                <td>Doe</td>
                                <td>HR</td>
                                <td class="btn-group btn-group-sm">
                                    <a class="btn btn-outline-secondary" href="#">1st button</a>
                                    <a class="btn btn-outline-primary" href="#">2nd button</a>
                                    <p hidden>Anything at all</p>
                                </td>
                            </tr>
                     </tbody>
              </table>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

赞(0）回复(0）举报 2023-04-13

我来回答

css Bootstrap无法识别按钮组的最后一个子项,如何修复？

3条答案

相关问题

热门标签

最新问答