无法在 Twitter Bootstrap 3 列网格中放置面板

Question

我有以下 CSS 和 HTML 代码：

.container-fluid{
    height:100%;
}

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

/**/

.container-fluid {
    height:100%;
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
    display: table-cell;
    float: none;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-7 col-lg-7 no-float" style="padding: 0 !important; border: solid blue">


            <iframe src="http://exame.abril.com.br/tecnologia/facebook/noticias/facebook-nao-tem-planos-de-voltar-a-china-diz-executivo"  style="border: none;"></iframe>

        </div>
        <div class="col-sm-12 col-md-5 col-lg-5  no-float" style=" padding:0; border: solid red">
<div class="row">
    <div class="panel panel-default" style="height: 100%!important; width: 100%!important; border: solid black ">
        <div class="panel-heading">QUESTIONS</div>
        <div class="panel-body">
            <div>
                <a>
                    <form  style="display: inline-block;  ">
                        <div class="input-group col-md-12">
                            <input type="text" class="  search-query form-control" placeholder="Recherche une question sur ce contenu" />
                            <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" >
                                        <span class=" glyphicon glyphicon-search"></span>
                                    </button>
                                </span>
                        </div>
                    </form>
                </a>
            </div>
            <div>
                <button type="button" class="btn btn-question">Ask new question</button>
            </div>

            
        </div>
    </div>
</div>
</div>
</div>
</div>

我希望面板（带有问题标题）适合整个 div 和 class="col-sm-12 col-md-5 col-lg-5 no-float"（100% 全高，100% 全宽），就像 iframe 在首先 div，但我有这样的东西：

我首先遇到列全高问题，我解决了阅读这个 post 现在我遇到了一个问题，无法将面板放入列网格中，但我什至在阅读此 post

之后也做不到

请问你能帮我什么忙？

Answer 1

您添加了一个额外的行，但表格不是那样工作的。结合新的垂直对齐设置，迫使问题面板向下。试试这个，让我知道它是否有效！

 <div class="col-sm-12 col-md-5 col-lg-5  no-float" style="vertical-align:top; padding:0; border: solid red">
            <div class="panel panel-default" style="height: 100%!important; width: 100%!important; border: solid black ">
                <div class="panel-heading">QUESTIONS</div>
                <div class="panel-body">
                    <div>
                        <a>
                            <form style="display: inline-block;  ">
                                <div class="input-group col-md-12">
                                    <input type="text" class="  search-query form-control" placeholder="Recherche une question sur ce contenu">
                                    <span class="input-group-btn">
                                            <button class="btn btn-default" type="button">
                                                <span class=" glyphicon glyphicon-search"></span>
                                            </button>
                                        </span>
                                </div>
                            </form>
                        </a>
                    </div>
                    <div>
                        <button type="button" class="btn btn-question">Ask new question</button>
                    </div>          
                </div>
            </div>
        </div>

.container-fluid{
    height:100%;
}

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

/**/

.container-fluid {
    height:100%;
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
    display: table-cell;
    float: none;
    vertical-align:top;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-7 col-lg-7 no-float" style="padding: 0 !important; border: solid blue">


            <iframe src="http://exame.abril.com.br/tecnologia/facebook/noticias/facebook-nao-tem-planos-de-voltar-a-china-diz-executivo"  style="border: none;"></iframe>

        </div>
        <div class="col-sm-12 col-md-5 col-lg-5  no-float" style=" padding:0; border: solid red">
    <div class="panel panel-default" style="height: 100%!important; width: 100%!important; border: solid black ">
        <div class="panel-heading">QUESTIONS</div>
        <div class="panel-body">
            <div>
                <a>
                    <form  style="display: inline-block;  ">
                        <div class="input-group col-md-12">
                            <input type="text" class="  search-query form-control" placeholder="Recherche une question sur ce contenu" />
                            <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" >
                                        <span class=" glyphicon glyphicon-search"></span>
                                    </button>
                                </span>
                        </div>
                    </form>
                </a>
            </div>
            <div>
                <button type="button" class="btn btn-question">Ask new question</button>
            </div>

            
        </div>
    </div>

</div>
</div>
</div>

无法在 Twitter Bootstrap 3 列网格中放置面板

Can't fit a panel inside a Twitter Bootstrap 3 column grid

html

css

panel

twitter-bootstrap

twitter-bootstrap-3