Question

我正在开发一个带LED盒的项目，它可以指示您的汽车何时需要维修。我目前正在为＆＃34;产品＆＃34;创建一个网站，但我在使用bootstrap中的列进行探测性调整内容时遇到了问题。

我希望第二部分中的内容像第一部分一样，当我调整窗口大小时

我的代码看起来像这样

＆＃13;

<div class="info-1000">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <h3 style="padding-top:20px">Lorum Ipsum</h3>
                <p class="info-tekst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus ipsum neque, sed interdum nisi congue nec. Etiam rutrum est eget nisi tincidunt feugiat. Phasellus eget dolor consectetur, scelerisque eros id, aliquet dui. Pellentesque pulvinar urna sem, ac ultrices mauris interdum ut. Etiam placerat sapien vel mi vulputate cursus. Sed rhoncus nunc non risus auctor tincidunt. Nullam ornare odio sed augue fringilla porta. Fusce maximus neque vitae augue vulputate, at convallis tortor lobortis. Suspendisse velit nibh, auctor suscipit sodales aliquam, consequat nec tellus. Quisque odio velit, posuere eu nisi eu, tempus consectetur ipsum. Proin sollicitudin sagittis ultricies. Donec in nunc.</p>
            </div>
            <div class="col-sm-4">
                <img class="modul" src="img/modul-1.png">
            </div>
        </div>
    </div>
</div>
    
<div class="info-500">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <img class="modul" src="img/modul-2.png">
            </div>
            
            <div class="col-sm-8">
                    <h3 style="padding-top:20px;" class="info-tekst-2"> Lorum Ipsum</h3>
                   <p class="info-tekst-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus ipsum neque, sed interdum nisi congue nec. Etiam rutrum est eget nisi tincidunt feugiat. Phasellus eget dolor consectetur, scelerisque eros id, aliquet dui. Pellentesque pulvinar urna sem, ac ultrices mauris interdum ut. Etiam placerat sapien vel mi vulputate cursus. Sed rhoncus nunc non risus auctor tincidunt. Nullam ornare odio sed augue fringilla porta. Fusce maximus neque vitae augue vulputate, at convallis tortor lobortis. Suspendisse velit nibh, auctor suscipit sodales aliquam, consequat nec tellus. Quisque odio velit, posuere eu nisi eu, tempus consectetur ipsum. Proin sollicitudin sagittis ultricies. Donec in nunc.</p>
            </div>
        </div>
    </div>
</div>

＆＃13;

希望你能帮忙

Answer 1

问题是将img-responsive课程添加到img。请参阅以下代码：

<div class="info-1000">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <h3 style="padding-top:20px">Lorum Ipsum</h3>
                <p class="info-tekst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus ipsum neque, sed interdum nisi congue nec. Etiam rutrum est eget nisi tincidunt feugiat. Phasellus eget dolor consectetur, scelerisque eros id, aliquet dui. Pellentesque pulvinar urna sem, ac ultrices mauris interdum ut. Etiam placerat sapien vel mi vulputate cursus. Sed rhoncus nunc non risus auctor tincidunt. Nullam ornare odio sed augue fringilla porta. Fusce maximus neque vitae augue vulputate, at convallis tortor lobortis. Suspendisse velit nibh, auctor suscipit sodales aliquam, consequat nec tellus. Quisque odio velit, posuere eu nisi eu, tempus consectetur ipsum. Proin sollicitudin sagittis ultricies. Donec in nunc.</p>
            </div>
            <div class="col-sm-4">
                <img class="modul img-responsive" src="img/modul-1.png">
            </div>
        </div>
    </div>
</div>

<div class="info-500">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <img class="modul img-responsive" src="img/modul-2.png">
            </div>

            <div class="col-sm-8">
                    <h3 style="padding-top:20px;" class="info-tekst-2"> Lorum Ipsum</h3>
                   <p class="info-tekst-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus ipsum neque, sed interdum nisi congue nec. Etiam rutrum est eget nisi tincidunt feugiat. Phasellus eget dolor consectetur, scelerisque eros id, aliquet dui. Pellentesque pulvinar urna sem, ac ultrices mauris interdum ut. Etiam placerat sapien vel mi vulputate cursus. Sed rhoncus nunc non risus auctor tincidunt. Nullam ornare odio sed augue fringilla porta. Fusce maximus neque vitae augue vulputate, at convallis tortor lobortis. Suspendisse velit nibh, auctor suscipit sodales aliquam, consequat nec tellus. Quisque odio velit, posuere eu nisi eu, tempus consectetur ipsum. Proin sollicitudin sagittis ultricies. Donec in nunc.</p>
            </div>
        </div>
    </div>
</div>

无法使用Bootstrap正确对齐内容

1 个答案: