Question

我正在研究网页的响应性，因为我正在使用Bootstrap。

网页包含图片和文字。我能够使它们都响应，但图像分别响应文本。两者都不相对。

我的意思是如果在5行文本之后有img，它会移动到其他地方，但它的大小正在减小。如何使文本和图像相对响应？

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-sm-8 col-xs-12">
            <img src="live_files/img_01.svg" class='img-responsive "stl_01"'>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-8 col-xs-12">
            <div class="stl_02">
                <span class="stl_03">Browser Support </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-8 col-xs-12">
            <div class="stl_04">
                <span class="stl_05">For PC users, LiveBinders is compatible
                    with Firefox 21 and higher, Safari 4.0.5 and higher, </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-8 col-xs-12">
            <div class="stl_06">
                <span class="stl_05">Chrome 30 and higher, and I.E. 9.0 and
                    higher. </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-8 col-xs-12">
            <div class="stl_07">
                <span class="stl_05">For Mac users, LiveBinders is
                    compatible with Safari 6.0.0, Chrome 30 and higher, and Firefox </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-8 col-xs-12">
            <div class="stl_08">
                <span class="stl_05">21 and higher. </span>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

我正在从pdf转换为html，在该pdf文件中，图像来自文本内容之间的任何位置。

但是通过添加这种响应性，首先显示图像然后显示文本，我的意思是图像与pdf中的图像格式不正确，它是未对齐的。

如何相对于彼此制作文字和图像？

Answer 1

我猜错误就在这里

<div class="row">
    <div class="col-md-6 col-sm-8 col-xs-12">
        <img src="live_files/img_01.svg" class='img-responsive "stl_01"'>
    </div>
</div>

应该是

<div class="row">
    <div class="col-md-6 col-sm-8 col-xs-12">
        <img src="live_files/img_01.svg" class="img-responsive">
    </div>
</div>

检查

http://jsbin.com/loqiwebu/1/

使用Bootstrap进行文本和图像相对响应

1 个答案: