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，请按以下方式使用：

为每个`div

设置width

.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>

如何使用d-inline-block

1 个答案: