在Bootstrap中如何将两个div并排放置？

Question

我试图使用Bootstrap将两个div并排显示，但它们之间有一定的距离。如何让它们挨在一起。

代码：

<div class="col-lg-8 col-lg-offset-2 centered">
    <div style="float: left; border: 1px solid; width: 227px; height: 50px;"></div>
    <div style="float: right; border: 1px solid;width: 227px; height: 50px;"></div>
</div>

图片说明：

- user3423384

---

为什么它们会挨在一起？一个向左浮动，一个向右浮动（每个都有小宽度），在一个宽度为8列的容器中。最好创建两个col-lg-4 div或正确调整div宽度。 - David Nguyen

为什么会有负评？也许需要将div的宽度设置为227px？ - user115014

Answer 1

查看 Bootstrap 中的网格。

你可以像这样做：

<div class="row">
    <div class="col-xs-6">div 1</div>
    <div class="col-xs-6">div 2</div>
</div>

- lschlessinger

---

很棒@lschlessinger，但如果您不想要两列col-xs-6而是想要两个col-xs-4并使它们居中，会发生什么？ - tblancog

'<div class="row"> <div class="col-xs-4 col-offset-xs-1"></div> <div class="col-xs-4"></div> </div>' - Parik Tiwari

对于那些刚接触Bootstrap的人，我认为这个需要放在外部<div class="container"</div>中才能正常工作。 - tbone

Answer 2

除了Lschessinger的回答，您还可以使用偏移量来居中块。在这里的列偏移下面查找。

也许这就是您要找的内容？

<style>
    .border {border: 1px solid #CCC;}
</style>

<div class="row">
    <div class="col-xs-2 border col-xs-offset-4">div 1</div>
    <div class="col-xs-2 border">div 2</div>
</div>

如果您必须坚持使用内联样式和特定宽度，请尝试将宽度从454像素增加到464像素，以获得10像素的间隙：

<div class="col-lg-12">
  <div style="width: 454px;" class="center-block">
    <div style="border: 1px solid; width: 227px; height: 50px;" class="pull-left"></div>
    <div style="border: 1px solid; width: 227px; height: 50px;" class="pull-right"></div>
  </div>
</div>

- user115014

Answer 3

一种方法是使用包含两个 div 元素的行。由于 Bootstrap 是使用 flexbox 构建的，这些元素将会看似相邻堆叠。

在下面的示例中，我使用了类 justify-content-center 来居中这两个元素。而 col-auto 则会根据其内容的自然宽度来调整列的大小。

div{border:1px solid blue}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
  <div class="row justify-content-center p-3">
    <div class="col-auto">
      content one
    </div>
    <div class="col-auto">
      content two
    </div>
  </div>
</div>

使用 justify-content-start 将元素左对齐

div{border:1px solid blue}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
  <div class="row justify-content-start p-3">
    <div class="col-auto">
      content one
    </div>
    <div class="col-auto">
      content two
    </div>
  </div>
</div>

使用 justify-content-end 将元素对齐到右侧

div{border:1px solid blue}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
  <div class="row justify-content-end p-3">
    <div class="col-auto">
      content one
    </div>
    <div class="col-auto">
      content two
    </div>
  </div>
</div>

注意：这些代码没有断点。如果您想添加断点，请使用以下格式：col-{breakpoint}-auto 或/和 justify-content-{breakpoint}-auto

- Gass