Question

在我的计划的一部分中，我将一些alerts附加到body-content。我希望它们垂直放置，每个放在不同的行上。

我可以在每个<div class="row"></div>之前添加alert来获得此结果。我的模板如下所示：

<div class="row"></div>
<div class="alert alert-danger alert-dismissable pull-left" style="width:300px;">
.......
</div>

如果我删除了<div class="row"></div>元素，则会将警告水平堆叠：

我希望在不添加任何其他元素的情况下达到预期的效果，因为在解除alert后它们不会被清除。

Answer 1

从警报类中删除Pull-left。请参阅以下代码。

HTML

 <div class="clearfix">
    <div class="alert alert-danger alert-dismissable pull-left" style="width:300px;">
    .......
    </div>
  </div>

Answer 2

试试这段代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Alert Message</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    .alert{
        clear: left;
    }
</style>
</head>
<body>
<div class="clearfix">
    <div class="alert alert-warning pull-left" style="width:300px;">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Warning!</strong> A simple alert message.
    </div>
    <div class="alert alert-warning pull-left" style="width:300px;">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Warning!</strong> A simple alert message.
    </div>
    <div class="alert alert-warning pull-left" style="width:300px;">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Warning!</strong> A simple alert message.
    </div>
</div>
</body>
</html>

从这些页面获取帮助：

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-alerts.php http://www.tutorialrepublic.com/css-tutorial/css-alignment.php

Answer 3

这里是代码看看，它可以帮助您解决问题

＆＃13;

#infoBox{
  display : flex;
  float : right;
}

#infoBox div{
  margin : 5px;  
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="infoBox">

  <div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Warning!</strong> A simple alert message.
  </div>
  <div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Warning!</strong> A simple alert message.
  </div>
  <div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Warning!</strong> A simple alert message.
  </div>

</div>

＆＃13;

在不同行上显示警报（垂直）

3 个答案: