是否可以在警報內使用Bootstrap（v3）網格系統？

Question

是否可以在警報內使用Bootstrap網格系統？ 我試圖通過將它們放在.col-xs-6 div中來並排放置幾個.btn .btn-block鏈接，但它們只是溢出警報。

JsFiddle在這里。

<div class="alert alert-info">
    <p>
        Alert text here.
    </p>
    <div class="col-xs-6">
         <a href="#" class="btn btn-block btn-default">Button A</a>
    </div>
    <div class="col-xs-6">
        <a href="#" class="btn btn-block btn-default">Button B</a>
    </div>
</div>

Answer 1

您需要使用.row容器包裝.row col-*類：

 <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <div class="alert alert-info"> <p>Alert text here.</p> <div class="row"> <div class="col-xs-6"> <a href="#" class="btn btn-block btn-default">Button A</a> </div> <div class="col-xs-6"> <a href="#" class="btn btn-block btn-default">Button B</a> </div> </div> </div> 

Answer 2

你在尋找這樣的東西： https ： //jsfiddle.net/bxttfxkw/1/

<div class="alert alert-info">
    <div class="row">
        <p class="col-xs-12">
            Alert text here.
        </p>
        <div class="col-xs-6">
             <a href="#" class="btn btn-block btn-default">Button A</a>
        </div>
        <div class="col-xs-6">
            <a href="#" class="btn btn-block btn-default">Button B</a>
        </div>
    </div>
</div>