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 の Rows/Columns が問題を引き起こしていると思います。検索ボックスをグリッドの外に移動して下部に移動することはできません (これは機能します)。これは、サイドバーもカバーするためです。グリッド システムを使用して、検索ボックスのサイズと配置を動的に維持しています。

また、これを試しましたが、うまくいかなかったようです: Making expandable fixed footer in 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 に答える