无法在 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% 全宽），就像第一个 div 中的 iframe 一样，但我有类似的东西这个：

我首先遇到了列全高的问题，我解决了阅读这个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>