Question

所以我试图使用bootstrap词缀功能，但它很奇怪。当您尝试向下滚动标题部分时，它会自动转到顶部。当屏幕宽度低于1100px时会发生这种情况。当您使用滚动条滚动时，它也仅在Chrome上。我有一个bootply设置来演示发生了什么。那么有人可以帮我弄清楚发生了什么事吗？

观看此video可能有所帮助。

CSS：

header {
                height: 365px;
                background: url("http://i.imgur.com/wU2YhOJ.png");
                background-color: #262626;
                background-size: cover;
                background-position: center;
            }

            header h1{
                font-family: Montserrat, sans-serif !important;
                font-size: 5.5em;
                color: white;
                word-break: normal;
                padding-top: 115px;

            }

            body h1 {
                font-family: 'Lato', sans-serif;
                line-height: 72px;
            }

            body, footer { font-family: 'Open Sans', sans-serif !important; }

            body p { line-height: 28px; }

            footer { background-color: #262626; }

            .fixed {
                position: fixed;
            }

            /* sidebar */
            .bs-docs-sidebar {
                padding-left: 20px;
                margin-top: 60px;
                margin-bottom: 20px;
            }

            /* all links */
            .bs-docs-sidebar .nav>li>a {
                color: #999;
                border-left: 2px solid transparent;
                padding: 4px 20px;
                font-size: 13px;
                font-weight: 400;
            }

            /* nested links */
            .bs-docs-sidebar .nav .nav>li>a {
                padding-top: 1px;
                padding-bottom: 1px;
                padding-left: 30px;
                font-size: 12px;
            }

            /* active & hover links */
            .bs-docs-sidebar .nav>.active>a, 
            .bs-docs-sidebar .nav>li>a:hover, 
            .bs-docs-sidebar .nav>li>a:focus {
                color: #262626;                 
                text-decoration: none;          
                background-color: transparent;  
                border-left-color: #262626; 
            }
            /* all active links */
            .bs-docs-sidebar .nav>.active>a, 
            .bs-docs-sidebar .nav>.active:hover>a,
            .bs-docs-sidebar .nav>.active:focus>a {
                font-weight: 700;
            }
            /* nested active links */
            .bs-docs-sidebar .nav .nav>.active>a, 
            .bs-docs-sidebar .nav .nav>.active:hover>a,
            .bs-docs-sidebar .nav .nav>.active:focus>a {
                font-weight: 500;
            }

            /* hide inactive nested list */
            .bs-docs-sidebar .nav ul.nav {
                display: none;           
            }
            /* show active nested list */
            .bs-docs-sidebar .nav>.active>ul.nav {
                display: block;           
            }
            /* special back to top styling */
            .back-to-top:hover,
            .back-to-top:focus{
                border-left-color: transparent !important;
            }

HTML：

<div class="col-sm-2" id="body-right">
                    <nav class="col-xs-3 bs-docs-sidebar">
                        <ul id="sidebar" class="nav nav-stacked fixed">
                            <li>
                                <a href="#GroupA">Getting Started</a>
                                <ul class="nav nav-stacked">
                                    <li><a href="#GroupASub1">Sub-Group 1</a></li>
                                    <li><a href="#GroupASub2">Sub-Group 2</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#GroupB">Font Awesome</a>
                                <ul class="nav nav-stacked">
                                    <li><a href="#GroupBSub1">Sub-Group 1</a></li>
                                    <li><a href="#GroupBSub2">Sub-Group 2</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#GroupC">Bootstrap</a>
                                <ul class="nav nav-stacked">
                                    <li><a href="#GroupCSub1">Sub-Group 1</a></li>
                                    <li><a href="#GroupCSub2">Sub-Group 2</a></li>
                                </ul>
                            </li>
                            <li><span>&nbsp</span></li>
                            <li>
                                <a class="back-to-top" href="#header">Back to top</a>
                            </li>
                        </ul>
                    </nav>  
                </div>

Answer 1

我不知道这是怎么发生的......但是在玩了一段时间之后。我有一个修复。

我认为导致它的原因是box-sizing:border-box bootstrap.min.css (line 7)。

更改它或将其覆盖到box-sizing:content-box似乎可以解决此问题。

如果您有自定义css文件，请使用以下类覆盖引导程序。

* {
    box-sizing:content-box;
}

希望这有助于

关于chrome的Bootstrap 3奇怪的词缀问题

1 个答案: