Question

我一直在网页上工作，不得不在jumbotron类中放置一个按钮。我的前8列是标题。在剩下的4列中，我放了一个按钮。该按钮似乎位于列的顶部。我想把它放在四列的中心。我该怎么做？请检查以下代码。

    <header class="jumbotron">
        <div class="container">
            <div class="row row-header">
                <div class='col-xs-12 col-sm-8'>
                    <h1>Heading</h1>
                     <p>Description</p>
                </div>
                <div class="col-xs-12 col-sm-4" >
                  <button type="submit" class="btn btn-warning btn-block" id="feedback" onclick="window.location.href='#feedback'">feedback</button>
                </div>
            </div>
        </div>
    </header>

Answer 1

我建议在你的一个列中插入一个flexbox（你想要的大小）。

它的工作原理如下：

.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

.flex-item { 
    max-width: 50%;
}

<header class="jumbotron"> 
        <div class="row row-header">
            <div class='col-sm-8'>
                text
            </div>
            <div class="col-sm-4 flex-container" > 

              <button type="submit" class="flex-item btn btn-warning btn-block" id="feedback" onclick="window.location.href='#feedback'">feedback</button>

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

bootply example

如何在引导列网格中垂直对齐按钮

1 个答案: