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

【问题标题】：Is it possible to use the Bootstrap (v3) grid system inside an alert?是否可以在警报中使用 Bootstrap (v3) 网格系统？
【发布时间】：2015-06-23 04:19:08
【问题描述】：

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

JsFiddle here.

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

【问题讨论】：

试着记住结构。容器 > 行 > 列

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您需要用.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>

【讨论】：

【解决方案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>

【讨论】：

为什么不直接将类 'row' 添加到警报 div 中
这样的事情将是使用 sn-p 而不是 jsfiddle 的好时机。
@Daemedeor，你是对的，但是，我想到了分离层并提供了一个想法，即甚至可以在警报中添加多行。
@JosephMCasey，当然:)