使连续的两个 div class 显得更近

Question

我左边是资料卡，右边是搜索栏

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
        <div class="card  border-info mb-3" style="max-width: 12rem; min-height: 200px;">
          .....
       </div>
    </div>
    <div class="col-md-9">
        <section class="search-sec">
            <div class="border border-info py-3 px-lg-5">
                <div class="container-fluid">
                    <form asp-action="Index" method="get">
                     ..............
                  </form>
                </div>
             </div>
         </section>
       </div>
   </div>
 </div>

问题是这两个没有并排出现。可以并排放置吗

Answer 1

使用 Flex 框可以解决问题，您可以制作一个部分，将两个 div 包含到该部分中，然后使用：

 section{
  display:flex;
  flex-direction:row;
  justify-content:center;
}

Answer 2

问题是当您将 style="max-width: 12rem; 与 Bootstrap 类 <div class="col-md-3"> 和 [=13 一起使用时，您限制了左侧 div 的宽度=].

<div class="col-md-3"> 占据了 12 列中的 3 列，但内容的宽度有限，所以你可以得到间隙。

尝试取消 max-width 声明，看看它是否适合您的用例。

这当然会使左边 div 变宽。您可能想尝试 <div class="col-md-2"> 和 <div class="col-md-10">.

编辑： Bootstrap 确实在使用 col-* 系统的元素中添加了 15px 的左右填充。我将 pr-0 添加到 col-md-3 并将 pl-0 添加到 col-md-9 以删除导致左右容器之间没有间隙的填充。

在“整页”模式下查看代码段以查看结果。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 pr-0">
        <div class="card  border-info mb-3" style="min-height: 200px;">
          .....
       </div>
    </div>
    <div class="col-md-9 pl-0">
        <section class="search-sec">
            <div class="border border-info py-3 px-lg-5">
                <div class="container-fluid">
                    <form asp-action="Index" method="get">
                     ..............
                  </form>
                </div>
             </div>
         </section>
       </div>
   </div>
 </div>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 3

您的内联样式 max-width: 12rem; 是问题所在。删除它有效。我认为您可以使用 col-md-2 而不是 col-md-3

Answer 4

如果你想删除两个之间的间距 div 你试过这个吗？

<div class="col-md-2 pr-0"> and <div class="col-md-10 pl-0">.

也删除了内联 css max-width: 12rem。

并且如果你想要小间距，那么你可以使用 pr-1 而不是 pr-0.

使连续的两个 div class 显得更近

Make two div class in a row appear closer

html

css

razor

asp.net-core-mvc

asp.net-core