Bootstrap 5：内联对齐divs而无需更改容器

发布于 2025-02-08 10:37:27 字数 815 浏览 1 评论 0原文

我一直在努力找到解决方案，似乎找不到任何有效的东西。我正在尝试使用Bootstrap 5为系统制作一些通用组件，并将一个按钮定义为：

<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>

当用户将其放在系统中的容器中时，它会自动生成一个外部容器：

<div class="divContainer">
//button
</div>

因此，如果用户尝试将2个按钮放置，代码看起来像：

<div class="divContainer">
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
<div class="divContainer">
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>

如何嵌入这些按钮并能够更改它们的对齐方式？我不可能将类添加到Divcontainers的外部容器中。

我希望有人可以为我阐明这个问题。谢谢。

原文

I've been working on finding a solution to this, and cannot seem to find anything that works. I am trying to make some general components for a system using Bootstrap 5, and have defined a button as:

<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>

When users place this in their container in the system, it automatically generates an outer container:

<div class="divContainer">
//button
</div>

So, if the users try to place 2 buttons, the code will look like:

<div class="divContainer">
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>
<div class="divContainer">
<div class="col buttonDiv">
<button type="button" class="btn btn-primary">Foo Bar</button>
</div>
</div>

How do I inline these buttons and also be able to change the alignment on them? It is not possible for me to add classes to the outer container of the divContainers.

I hope someone can shed some light on this problem for me. Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

待天淡蓝洁白时 2025-02-15 10:37:28

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Example</title>
  </head>
  <body>

    <!-- Example Code -->
    
    <div class="d-flex">
      <button type="button" class="btn btn-primary d-block">Foo Bar</button>
      <button type="button" class="btn btn-primary d-block ms-2">Foo Bar</button>
    </div>
    
    <!-- End Example Code -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

<div class="d-flex">
  <button type="button" class="btn btn-primary d-block">Foo Bar</button>
  <button type="button" class="btn btn-primary d-block ms-2">Foo Bar</button>
</div>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Example</title>
  </head>
  <body>

    <!-- Example Code -->
    
    <div class="d-flex">
      <button type="button" class="btn btn-primary d-block">Foo Bar</button>
      <button type="button" class="btn btn-primary d-block ms-2">Foo Bar</button>
    </div>
    
    <!-- End Example Code -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

<div class="d-flex">
  <button type="button" class="btn btn-primary d-block">Foo Bar</button>
  <button type="button" class="btn btn-primary d-block ms-2">Foo Bar</button>
</div>

回复收藏 0 原文

李不 2025-02-15 10:37:28

使用Bootstrap 5 class d-inline将它们对齐 Docs 在这里

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="divContainer d-inline">
    <div class="col buttonDiv d-inline">
        <button type="button" class="btn btn-primary">Foo Bar</button>
    </div>
</div>
<div class="divContainer d-inline">
    <div class="col buttonDiv d-inline">
        <button type="button" class="btn btn-primary">Foo Bar</button>
    </div>
</div>

<div class="divContainer d-inline">
<div class="divContainer d-inline">
        <div class="col buttonDiv d-inline">
            <button type="button" class="btn btn-primary">Foo Bar</button>
        </div>
    </div>
    <div class="divContainer d-inline">
        <div class="col buttonDiv d-inline">
            <button type="button" class="btn btn-primary">Foo Bar</button>
        </div>
    </div>

use Bootstrap 5 class d-inline to align them Docs here

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="divContainer d-inline">
    <div class="col buttonDiv d-inline">
        <button type="button" class="btn btn-primary">Foo Bar</button>
    </div>
</div>
<div class="divContainer d-inline">
    <div class="col buttonDiv d-inline">
        <button type="button" class="btn btn-primary">Foo Bar</button>
    </div>
</div>

<div class="divContainer d-inline">
<div class="divContainer d-inline">
        <div class="col buttonDiv d-inline">
            <button type="button" class="btn btn-primary">Foo Bar</button>
        </div>
    </div>
    <div class="divContainer d-inline">
        <div class="col buttonDiv d-inline">
            <button type="button" class="btn btn-primary">Foo Bar</button>
        </div>
    </div>

回复收藏 0 原文

~没有更多了~