html - 如何使用 d-inline-block

Question

d-inline-block 不工作我尝试使用 css，但仍然无法正常工作

<div class="d-inline-block">
    <!--Service Image-->
    <div class="service_img container d-inline-block">
        <img class="responsive" src="/img/service.jpg">
    </div>

    <!--Service Content-->
    <div class="container d-inline-block">
    <p> 
        Scroll Up and Down this page to see the parallax scrolling effect.
    This div is just here to enable scrolling.<br>
    Tip: Try to remove the background-attachment property to remove the scrolling effect.

    </p>
    </div>
</div>

Answer 1

使用 inline-block 使用 bootstrap 的 row/col(意味着使用 flex 而不是 inline - block ).

用 container 类将所有内容包装在 div 中

同时使用 img-fluid类到 img

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
<div class="row">
    <!--Service Image-->
    <div class="service_img col-6">
        <img class="img-fluid" src="/image/mSXoO.png">
    </div>

    <!--Service Content-->
    <div class="col-6">
    <p> 
        Scroll Up and Down this page to see the parallax scrolling effect.
    This div is just here to enable scrolling.<br>
    Tip: Try to remove the background-attachment property to remove the scrolling effect.

    </p>
    </div>
</div>
</div>

如果你想使用d-inline-block，请按如下方式使用:

为每个`div设置宽度

.w-49{
    width: 49%!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="service_img d-inline-block w-49">
  <img class="img-fluid" src="/image/mSXoO.png">
</div>

<div class="d-inline-block w-49">
  <p>
    Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling.<br> Tip: Try to remove the background-attachment property to remove the scrolling effect.

  </p>
</div>