如何用Bootstrap实现右侧固定图片+左侧可滚动文本布局

我来帮你调整这个布局，让右侧图片固定、左侧长文本区域可滚动，用Bootstrap 3就能轻松搞定。先说说你原代码里的小问题：直接给row加pull-right/pull-left不仅不符合Bootstrap栅格的规范，也没法实现固定定位和滚动的需求，咱们换更合理的方式来做。

解决方案思路 #

• 用Bootstrap的栅格系统划分左右区域，替代手动的浮动设置
• 给右侧图片容器设置固定定位，让它始终停留在视口右侧
• 给左侧文本容器设置垂直滚动，并预留出右侧固定元素的空间，避免内容被遮挡

修正后的完整代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
.fixed-right-img {
    position: fixed;
    right: 30px; /* 和container的padding对应，保证对齐 */
    top: 50px; /* 和container的margin-top对应 */
    height: calc(100vh - 60px); /* 减去顶部间距，让图片区域占满剩余视口高度 */
    overflow-y: auto; /* 如果图片高度超过视口，也能滚动 */
}
.scrollable-text {
    height: calc(100vh - 60px); /* 占满剩余视口高度 */
    overflow-y: auto; /* 开启垂直滚动 */
    padding-right: 40%; /* 预留右侧固定元素的宽度空间，避免内容被遮挡 */
}
</style>

<div class="container" style="margin-top: 50px;">
    <div class="row">
        <!-- 左侧可滚动文本区域 -->
        <div class="col-md-8 scrollable-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo</p>
        </div>
        <!-- 右侧固定图片区域 -->
        <div class="col-md-4 fixed-right-img">
            <img src="https://picsum.photos/200/300/?random" alt="示例图片" style="max-width: 100%;">
        </div>
    </div>
</div>

关键细节解释 #

1. 栅格划分：用col-md-8和col-md-4划分左右比例，你可以根据需求调整成col-md-7/col-md-5等
2. 固定定位设置：fixed-right-img类用position: fixed让图片固定，right和top值和外层container的边距对应，保证布局对齐；height: calc(100vh - 60px)让图片区域自适应视口高度
3. 滚动文本设置：scrollable-text类用overflow-y: auto开启垂直滚动，padding-right预留出右侧固定元素的宽度，避免文本被图片遮挡
4. 图片响应性：给图片加max-width: 100%，保证在不同屏幕尺寸下不会超出容器宽度

内容的提问来源于stack exchange，提问作者VijayaKrishna