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

Question

是否可以在警报内使用Bootstrap网格系统？我试图将.btn .btn-block个.col-xs-6链接放在一个<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> div中，但它们只是溢出警报。

JsFiddle here.

n

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>

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>