是否可以在警报内使用Bootstrap(v3)网格系统？

Question

是否可以在警报内使用Bootstrap网格系统？我试图.btn .btn-block通过将它们放在.col-xs-6div中来并排放置几个链接,但它们只是溢出警报.

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

您需要col-*使用.row容器包装类:

<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>