如何创建粘性底部搜索框 Bootstrap (React)答案

【问题标题】：How to create sticky bottom search box Bootstrap (React)如何创建粘性底部搜索框 Bootstrap (React)
【发布时间】：2015-05-26 05:09:52
【问题描述】：

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

我想要做什么（没有自定义 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 的行/列导致了一些问题。我无法将搜索框移出网格并移到底部（这确实有效），因为它还会覆盖侧边栏，并且我正在使用网格系统来保持搜索框动态调整大小/放置。

另外，我试过这个，但它似乎没有用：Making expandable fixed footer in Bootstrap 3?

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 accordion react-bootstrap

【解决方案1】：

解决方案是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

【讨论】：

您会注意到，在该示例中，搜索框“页脚”超出了其 10 宽的列并占据了整个 12 列。我该如何避免呢？
您可以尝试将 Bootstrap 的 .container（负责响应宽度）添加到您的 .search 并查看结果如何，或者滚动您自己的代码。我更新了我的示例以涵盖基本案例。
想一想，你宁愿尝试附加.col-md-5而不是.container，但仍然不确定这是否可行。