Question

我已经尝试了几个小时尝试我找到的不同的例子，但似乎都没有。

我想做什么（没有自定义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?

Answer 1

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

＆＃13;

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
    }
}

＆＃13;

<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>

＆＃13;

JSFiddle

如何创建粘底搜索框Bootstrap（React）

1 个答案: