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

Question

I am working on responsiveness of web page, for that I am using Bootstrap. 我正在使用Bootstrap开发网页的响应能力。

The web page consists of both image and text. 该网页包含图像和文本。 I am able to make both of them responsive, but the image is getting responsive separately of the text. 我能够使它们都具有响应性，但是图像与文本分开变得具有响应性。 Both are not relative to each other. 两者彼此不相关。

I mean if an img is there after 5 lines of text, it is moving to some other place, but it's size is decreasing. 我的意思是，如果在5行文字之后有一个img ，它就会移动到其他地方，但是它的大小正在减小。 How can I make both text and image relatively responsive? 如何使文本和图像都具有相对响应能力？

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

I'm converting from pdf to html, in that pdf file the image comes any where inbetween the text contents. 我正在从pdf转换为html，在该pdf文件中，图像出现在文本内容之间的任何位置。

But by adding this responsiveness the image coming first and then text gets displays, I mean the image is not properly in the same format as it was in pdf, it's misaligned. 但是，通过添加此响应度，图像首先出现，然后显示文本，这意味着图像的格式与pdf中的格式不正确，未对齐。

How to make Text and Image relative to each other? 如何使文本和图像彼此相对？

Answer 1

The error i guess is here 我猜这里是错误

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

it should be 它应该是

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

Check this 检查一下

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-07-10 10:14:28

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-07-10 10:14:28

解决方案1
0 已采纳 2014-07-10 10:14:28