0

我已经尝试了几个小时尝试我发现的不同示例，但似乎没有一个有效。

我想要做什么（没有自定义 JS）：http: //jsfiddle.net/paulalexandru/Z2Lu5/

但是，我无法让它在 Bootstrap 中工作。我专门使用 React-Bootstrap（对于那些不熟悉 React/React-Bootstrap 的人，我已将以下代码更改为普通 HTML），但我认为这不是问题所在。我的设置如下：

<body>
    <div class="container-fluid main">
        <div class="row">
            <div class="col-md-2 sidebar"
                <my sidebar elements>
            </div>
            <div class="col-md-10">
                <some random empty div (that will fill in the future)>
                <div class="search">
                    <div className="panel-group">
                        <div className="panel panel-default">
                            <div className="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion" href="#searchResultsContainer">
                                    <input type="text" onchange="handleChange()" />
                                </a>
                            </div>
                            <div id="searchResultsContainer" className="panel-collapse collpase">
                                <div className="panel-body">
                                    <my table containing search results from the server>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

然而，无论我多么努力

.search {
    position: fixed;
    bottom: 0;
    width: 100%;
}

您还会注意到尝试使搜索结果手风琴的东西，但这对我来说毫无用处，直到我可以让这个框留在底部。

我的猜测是 Bootstrap 的行/列导致了一些问题。我无法将搜索框移出网格并移到底部（确实有效），因为它还覆盖了侧边栏，并且我正在使用网格系统来保持搜索框动态调整大小/放置。

另外，我试过这个，但似乎没有用：在 Bootstrap 3 中制作可扩展的固定页脚？

4

1 回答 1

0

解决方案是position: fixed（您也可以看到另一个使用它的示例）。无论您使用什么框架，它都应该工作。

body
{
    margin: 0;
    padding: 0;
}
.search
{
    background: rgba(255,0,0,0.5);
    bottom: 0;
    position: fixed;
    width: 100%;
}

@media only screen and (min-width: 550px)
{
    .search
    {
        left: 50%;
        margin-left: -250px;
        width: 500px;
    }
}

@media only screen and (min-width: 850px)
{
    .search
    {
        margin-left: -400px;
        width: 800px
    }
}
<div class="container-fluid main">
        <div class="row">
            <div class="col-md-2 sidebar">
                <div>my sidebar elements</div>
            </div>
            <div class="col-md-10">
                <div>some random empty div (that will fill in the future)</div>
                <div class="search">
                    <div className="panel-group">
                        <div className="panel panel-default">
                            <div className="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion" href="#searchResultsContainer">
                                    <input type="text" onchange="handleChange()" />
                                </a>
                            </div>
                            <div id="searchResultsContainer" className="panel-collapse collpase">
                                <div className="panel-body">
                                    <div>my table containing search results from the server</div>                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

JSFiddle

于 2015-03-23T09:34:32.017 回答