Samding 发表于 2019-11-29 20:50

Bootstrap为什么会无中生空格

本帖最后由 Samding 于 2019-11-30 00:36 编辑

想问一下图中框柱的空白是怎么来的,能去掉吗
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" >
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
                <pre style="display: inline-block;">       </pre>
                <div style="display: inline-block;" class="row">
                        <div style="display: inline-block;">
                              <p>图片在头部 (card-img-top):</p>
                              <div style="width:400px">
                                        <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" style="width:100%">
                                        <div>
                                                <h4>John Doe</h4>
                                                <p>Some example text some example text. John Doe is an architect and engineer
                                                </p> <a href="#" class="btn btn-primary">See Profile</a>
                                        </div>
                              </div>
                        </div>
                        <pre style="display: inline-block;">       </pre>
                        <div style="display: inline-block;">
                              <p>图片在底部(card-img-bottom):</p>
                              <div style="width:400px">
                                        <div>
                                                <h4>Jane Doe</h4>
                                                <p>Some example text some example text. Jane Doe is an architect and
                                                      engineer</p>
                                                <a href="#" class="btn btn-primary">See Profile</a>
                                        </div>
                                        <img class="card-img-bottom" src="https://static.runoob.com/images/mix/img_avatar.png" style="width:100%">
                        </div>
                </div>
      </div>
</body>

</html>

mustard666 发表于 2019-11-29 21:03

浏览器版本:
Google Chrome 已是最新版本
版本 78.0.3904.108(正式版本) (64 位)

效果如图,没有发现有什么不对

mustard666 发表于 2019-11-29 21:03

不行你就用开发者工具看看那个空白是什么元素导致的

Samding 发表于 2019-11-29 21:26

mustard666 发表于 2019-11-29 21:03
不行你就用开发者工具看看那个空白是什么元素导致的https://attach.52pojie.cn//forum/201911/29/212702g6as636txt1eczfv.png?l

只有鼠标移到框柱的那行或padding中才会覆盖到那个空白,其它代码,包括那个div内的元素都没有覆盖到空白

Roothu 发表于 2019-11-29 21:38

本帖最后由 Roothu 于 2019-11-30 18:49 编辑

Cent Browser
版本 4.0.9.112(正式版本) (64 位) (portable) (Chromium 74.0.3729.169)
未出现空白

bakaest 发表于 2019-11-29 22:00

怪,看着好像没问题

ids 发表于 2019-11-29 22:21

Roothu 发表于 2019-11-29 21:38
Cent Browser
版本 4.0.9.112(正式版本) (62 位) (portable) (Chromium 74.0.3729.169)
未出现空白

62位的系统吗?呵呵呵

Roothu 发表于 2019-11-30 18:48

ids 发表于 2019-11-29 22:21
62位的系统吗?呵呵呵

打错字而已 呵呵呵呵
页: [1]
查看完整版本: Bootstrap为什么会无中生空格