как использовать 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 используйте загрузчик row/col (значит, используйте flex вместо inline-block).

Оберните все в div с классом container

Также и используйте 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="https://i.stack.imgur.com/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 используйте, как показано ниже:

Установите width для каждого `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="https://i.stack.imgur.com/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>