标签中的Div

Question

我想在我的页面中使用导航栏。但是当我在div选项卡内容中添加div时，我希望它们是并排的，但它们把自己放在下面。我希望他们是这样的&;测试测试测试;相反，它们是这样的">
TEST
TEST ">

我的错在哪里?

<div class="send-message">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-heading">
<h2 style="text-align: center;">Réservations</h2>
</div>
</div>
<div class="col-sm-2" style="text-align: center;"></div>
<div class="col-sm-8" style="text-align: center;">
<ul class="nav nav-pills nav-fill" style="text-align: center;">
<li class="nav-item active"><a class="nav-link active" data-toggle="pill" href="#resPas">Réservations passées</a></li>
<li class="nav-item "><a class="nav-link" data-toggle="pill" href="#resAct">Réservations actives</a></li>
</ul>
</div>
<div class="col-sm-2" style="text-align: center;"></div>
<div class="col-md-12">
<div class="tab-content">
<div id="resPas" class="tab-pane fade show active">
<div class="col-md-4">Test</div>
<div class="col-md-4">Test</div>
<div class="col-md-4">Test</div>
</div>
</div>
</div>
</div>
</div>

谢谢大家的帮助!

Answer 1

<style>
.table-side{
display:flex;
flex-direction:row;
justify-content:space-around;
}
</style>
<div class="send-message">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-heading">
<h2 style="text-align: center;">Réservations</h2>
</div>
</div>
<div class="col-sm-2" style="text-align: center;"></div>
<div class="col-sm-8" style="text-align: center;">
<ul class="nav nav-pills nav-fill" style="text-align: center;">
<li class="nav-item active"><a class="nav-link active" data-toggle="pill" href="#resPas">Réservations passées</a></li>
<li class="nav-item "><a class="nav-link" data-toggle="pill" href="#resAct">Réservations actives</a></li>
</ul>
</div>
<div class="col-sm-2" style="text-align: center;"></div>
<div class="col-md-12">
<div class="tab-content">
<div id="resPas" class="tab-pane table-side fade show active">
<div class="col-md-4">Test</div>
<div class="col-md-4">Test</div>
<div class="col-md-4">Test</div>
</div>
</div>
</div>
</div>
</div>

我创建了一个单独的类table-side，并添加了一些flex属性，使div并排出现

Answer 2

在CSS文件中设置如下样式:

.col-md-4 { display: inline-block;}

或

div#resPas { display: flex; }

你可以给制表符添加边距或内边距来解决空格问题。