CSS 在Bootstrap中将两个div并排排列

在本文中，我们将介绍如何使用CSS在Bootstrap中将两个div并排排列。

阅读更多：CSS 教程

使用Bootstrap的栅格系统

Bootstrap是一个流行的前端框架，提供了灵活的栅格系统，可以方便地实现页面布局。栅格系统由包含行（row）和列（column）的组合构成。在栅格系统中，页面被分成12列，可以在行中创建不同数量和宽度的列。

为了将两个div并排排列，我们需要在bootstrap的栅格系统中使用适当的类。首先，我们需要在一个容器内创建一个行。添加一个容器（container）来包裹行可以确保内容居中显示。

例如，我们可以创建一个如下所示的HTML结构：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="div1">Div 1</div>
    </div>
    <div class="col-md-6">
      <div class="div2">Div 2</div>
    </div>
  </div>
</div>

在上面的示例中，我们创建了一个容器，其中包含了一个行，并在行中创建了两个列。每个列具有col-md-6类，意味着每个列占据了行的50%的宽度。我们在每个列中创建了一个div，并分别给它们添加了div1和div2类。

自定义样式

除了使用Bootstrap的默认样式外，我们还可以根据需要自定义样式。我们可以使用CSS选择器来选择并修改特定的元素。

例如，我们可以创建一个如下所示的CSS样式：

.div1 {
  background-color: red;
  padding: 20px;
  color: white;
}

.div2 {
  background-color: blue;
  padding: 20px;
  color: white;
}

在上面的示例中，我们为div1和div2选择器定义了样式。我们设置了背景颜色、内边距和字体颜色等属性。

示例演示

为了更好地理解如何将两个div并排排列，我们可以创建一个简单的示例。我们使用上面提到的HTML结构和CSS样式，并为div 1和div 2添加文字。

HTML代码如下所示：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="div1">我是Div 1</div>
    </div>
    <div class="col-md-6">
      <div class="div2">我是Div 2</div>
    </div>
  </div>
</div>

CSS代码如下所示：

.div1 {
  background-color: red;
  padding: 20px;
  color: white;
}

.div2 {
  background-color: blue;
  padding: 20px;
  color: white;
}

在浏览器中运行上述代码，我们将看到div 1和div 2并排显示，并且具有我们定义的样式。

总结

通过使用Bootstrap的栅格系统和自定义样式，我们可以轻松地将两个div并排排列在一起。首先，在一个容器内创建一个行，并在行中创建两个列，使用col-md-6类来指定每个列的宽度。然后，根据需要添加自定义样式，通过CSS选择器选择并修改元素的样式。最后，我们可以使用示例演示来验证我们的布局和样式。

希望本文对你理解如何在Bootstrap中将两个div并排排列有所帮助！