如何在Bootstrap中将两个div放在同一行

Question

如何在Bootstrap中将两个div放在同一行

htmlcsstwitter-bootstrap

7

我有两个div，正在使用Bootstrap。

我希望文本靠左对齐并紧密排列在一起。

现在，我正在尝试使用col-md-x，但没有得到我需要的结果：

期望：

实际情况：

Codepen链接：

https://codepen.io/ogonzales/pen/yLLjLjr

- Omar Gonzales

如果它们应该紧挨在一起，为什么要将它们分成列呢？这似乎是您的主要问题，然后是垂直对齐。看起来在这种情况下不应该使用col-md-x，因为它是用于使用12列网格，而您的标题始终会占据行中1/3的空间，星星容器始终会占据2/3的空间。 - MrRobboto

值得查看 Bootstrap 弹性布局相关的文档 - 或将您的元素设置为内联块元素并使用垂直对齐。https://getbootstrap.com/docs/4.3/utilities/flex/ - MrRobboto

4个回答

3

您可以尝试像下面这样将要对齐的div添加为内联元素：

<div class="d-flex">
 <div class="d-inline-block"> Your div 1 </div>
 <div class="d-inline-block"> Your div 2 </div>
</div>

- Vysakh Vijayakumar

1

如果您使用 bootstrap，就无需添加 CSS 样式，因为 bootstrap 完全基于网格系统运行，您只需要根据自己的方便调整列和行即可。

我已经更新了您的代码，请查看并告诉我是否需要更改代码。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center">
            <div class="d-inline-block">
                <h2 id="product-name" class="">Stickers troquelados</h2>
            </div>
            <div class="col-5 pt-2">
                             <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star-half-alt"></i>
                            <!-- <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star-half-alt"></i></a> -->
                            858 comentarios
            </div>
    </div>

我还添加了CodeSandbox链接，以便您更简洁地了解。

链接：CodeSandBox

- Ronak Khangaonkar

这就是为什么我给你提供了CodeSandbox链接，因为该页面不具有响应式设计，所以会看到句子被打断。在CodeSandbox中，只需扩展codeSandbox的浏览器即可。 - Ronak Khangaonkar

-1

使用Flexbox布局

<div class="row-div">
  <div>Stickers troquelados</div>
  <div>***** 858 Comments</div>
</div>

CSS，

.row-div {
  display: flex;
  justify-content: center;
}
/* Having some margin to make the two divs some distance */
.row-div>div {
  margin-right: 5px;
}

- Gangadhar Gandi

1

同意这很简单，但 OP 正在使用使用 flexbox 的 bootstrap，因此可能不应添加其他自定义 CSS。在我看来，OP 应该学习如何使用他们当前正在使用的框架，该框架绝对提供此功能。 - MrRobboto

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- VSM · Accepted Answer

尝试使用此 Jsfiddle链接。为了解决这个问题，我只使用了三个Bootstrap类.d-flex，.align-items-center和.d-inline-block。在您的布局中到处应用.row和.col类并不是最佳实践。您需要理解它们适用的正确位置。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-items-center">
            <div class="d-inline-block">
                <h2 id="product-name" class="">Stickers troquelados</h2>
            </div>
            <div class="d-inline-block">
                    <span class="">
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star-half-alt"></i>
                            <!-- <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star-half-alt"></i></a> -->
                            858 comentarios
                    </span>
            </div>
    </div>