javascript - 在 Bootstrap 中使用 vertical scrollspy 时如何获得全宽图像？-6ren

javascript - 在 Bootstrap 中使用 vertical scrollspy 时如何获得全宽图像？

转载作者：行者123 更新时间：2023-11-28 19:16:18

25

4

我想要一个使用 Bootstrap 的响应式网页，左侧有垂直滚动条，右侧有视差滚动条。 It should look something like this

目前这是我的代码:

<!DOCTYPE html>

<html>
<head>
    <title>Rwitaban Goswami</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <style>
        body{
            position: relative;
        }
        ul.nav-pills{
            top:20px;
            position:fixed;
        }
        .parallax{
            min-height:300px;
            background-attachment: fixed;
            background-size: cover;
            background-position: 50% 50%;
        }
        .parallaxsec{
            background-image: url("DP.jpg");
        }
        .jumbotron{
            margin-bottom: 0;
        }
        .parallax h1 {
            color: rgba(255, 255, 255, 0.8);
            font-size: 60px;
            text-align: center;
            padding-top: 60px;
            line-height: 100px;
          }
      p{
        font-size: 20px;
      }

    </style>
</head>

<body data-spy="scroll" data-target="#navbar" data-offset="20">

<div class="container">
    <div class="row no-gutters">
        <nav id="scrollspy" class="col-sm-3">
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#item-1">Item 1</a></li>
            <li> <a href="#item-2">Item 2</a></li>
            </ul>
        </nav>
        <div class="col-sm-9">
            <div class="jumbotron parallax parallaxsec">
                <h1 class="display-3">Rwitaban Goswami</h1>
            </div>
            <div>
                <p>Text</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

但这会创建一个有太多空白的布局，并且图像宽度非常小。如何获得更好的布局，让 scrollspy 左侧没有空间，并为图像和文本留出足够的宽度？

最佳答案

删除第一个 DIV 的“container”属性，因为这会根据您的口味添加过多的填充。

所以上面的代码看起来是这样的:

        <div>
          <div class="row no-gutters">
    <nav id="scrollspy" class="col-sm-3">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#item-1">Item 1</a></li>
        <li> <a href="#item-2">Item 2</a></li>
        </ul>
    </nav>
    <div class="col-sm-9">
        <div class="jumbotron parallax parallaxsec">
            <h1 class="display-3">Rwitaban Goswami</h1>
        </div>
        <div>
            <p>Text</p>
        </div>
    </div>
</div>

关于javascript - 在 Bootstrap 中使用 vertical scrollspy 时如何获得全宽图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58229409/

25

4

0

文章推荐： iphone - applicationWillEnterForeground 内存泄漏

文章推荐： python - 如何使 XLRD 读取 XLSX 单元格中的超链接？

文章推荐： iphone - UITouch，拖放根本不起作用

文章推荐： python - 覆盖 CKAN 中的 url 验证器

css - 窗口底部的位置标题+全宽
我有一个标题 1(#banner h1.index_banner_text)，它需要始终位于距页面底部 20 像素和距页面左侧 570 像素的位置。如果调整窗口大小，我希望标题自然堆叠，但始终与页面底
javascript - 倾斜底部边框 - 全宽
这个问题已经有答案了: CSS responsive slanted edge (1 个回答) 已关闭 7 年前。我想知道如何创建一个宽度为 100% 的 div，宽度为 300 像素，其中底部边框
jquery - 全宽 Accordion
我做了一个非常简单的水平全宽 Accordion ，但我遇到了一个错误 - 它的最后一部分在折叠过程中下降了。这是我的代码:https://jsfiddle.net/trzxs3u1/ 它可能来自同
html - 显示时图像未占据全高/全宽
我有两张相同的图片。我几乎一直显示其中一张图像，唯一的异常(exception)是在 1001px - 1400px 的视口(viewport)中，我显示图像的裁剪版本。由于某种原因，company-
css - 页眉 - 全宽
我的应用程序中有这个页面: http://actibities-uniongr.rhcloud.com/pages/view-demo 如果您将浏览器的窗口缩短到小于 1000 像素并水平滚动，您会看
html - Vimeo 全宽
这个问题在这里已经有了答案: How did YouTube create a fluid video player? (1 个回答) 关闭 5 天前。我正在尝试在网页中全宽显示一个 vimeo
jquery - Fancybox 全宽
我是编码新手，我试图只在我的 homepage 中使用每个 fancybox全宽和响应式 ( eg )，但这些选项都没有完成这项工作(fitToView、autoSize 或 aspectRatio)
markdown - 全宽 Markdown 表格
到目前为止，我已经在 Markdown 表格中获得了尽可能多的格式和居中文本，但是在控制相对于外部容器的表格尺寸方面我没有发现任何东西(至少除了当它太大时它会自动缩小的事实)换行文本。) 是否可以在
javascript - 全宽 Swiper 在幻灯片左侧有一个间隙
带有大屏幕的 Windows 版 Chrome 上的 Swiper 插件存在问题。它在幻灯片左侧留下空白，我创建了一支笔来演示这一点: https://codepen.io/anon/pen/BwMx
c# - 如何使用 WebView 全宽
在我的 Windows 应用商店应用程序中，我只有一个 XAML 中的 WebView: 我想在不同的屏幕尺寸或方向上将宽度设置为最大可用值。我试图获取砂砾本身的宽度来设置 WebVi
android - 水平 ScrollView 全宽
好吧，我开发了一个 HorizontalScrollView，里面有一些按钮。我可以通过 getWidth() 获取此 HorizontalScrollView 的宽度。但这会返回显示的 H
javascript - jcrop 全宽/高度比例裁剪
我们实现了 Jcrop在我们的系统中，到目前为止它运行良好。但是我们最近发现了一个小问题: 场景我们的网站允许用户上传他们公司的标志。我们的宽高比要求是 200/150，不幸的是，用户的公司 Log
ios - 全宽 View 不包含与父级相同的框架宽度
我遇到一个问题，我的 UIImageView 使用以下约束跨越整个屏幕宽度。将前导对齐到:Superview(等于:-20) 将尾部对齐到:Superview(等于:-20) Top Space t
css - 全宽 div 内的响应式图像
我有这个标记: 和这个 css(我正在使用 Twitter Bootstrap): img { height: auto; max-width
javascript - 全宽、响应式、网格布局
谁能给我解释一下这个页面是如何运作的？ http://wexley-demo.squarespace.com/ 我看到有javascript，但不明白。这也是实现这种效果最简单的方法吗？ – 缩放、
javascript - 调整大小时 slider 全宽
我正在研究这个 slider : http://codepen.io/anon/pen/viBHe 当您打开页面时， slider 获得屏幕的 100% 宽度，这很好用，也是我想要实现的，但问题是当您
html - 全宽 SVG 剪辑
我目前正在为单页网站制作剪切路径: http://grafomantestsite3.be/ 如您所见，这适用于 chrome，但不适用于 firefox、opera 等。我做了一个代码笔来说明我的
html - 全宽 anchor 标签问题
代码如下: Overall Advance Rating(1 foodees rated) 这里也是在对图像进行评级后获得光标。我如何处理光标直到只有图像。我曾尝试使
jquery - 全宽 Bootstrap 下拉菜单
我正在尝试制作一个与此页面中的菜单类似的 Bootstrap 菜单。https://makr.com/ 这就是我想出的，但我现在几乎卡住了。如何使下拉文本显示在每个下拉按钮下方，就像在 https:
html - 全宽 Vimeo 嵌入无响应
我在 div 中嵌入了一个 vimeo，它是视口(viewport)的全宽。该视频在几天内运行良好，但现在播放按钮(和所有其他按钮)完全没有响应。我试过弄乱 z-index 但那不起作用。

首页

博学

6Ren·AI

商城

javascript - 在 Bootstrap 中使用 vertical scrollspy 时如何获得全宽图像？