我在引導模式下有兩列布局。應該有一個引導下拉按鈕作爲內容。 Firefox正確呈現它,但基於Webkit的瀏覽器無法正確顯示按鈕。該按鈕不會懸停或點擊事件,因爲其位置呈現錯誤。Webkit瀏覽器呈現多列布局內容錯誤
現在的問題是:我做錯了什麼?有沒有辦法避免這個問題?
的的jsfiddle是在這裏:http://jsfiddle.net/cenap/mtpj8god/4/
全屏:http://jsfiddle.net/cenap/mtpj8god/4/embedded/result/
.multicolumn-container {
width: 250px;
height: 300px;
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
-webkit-column-rule: 1px outset #CCC;
/* Chrome, Safari, Opera */
-moz-column-rule: 1px outset #CCC;
/* Firefox */
column-rule: 1px outset #CCC;
overflow: auto;
}
.box {
display: inline-block;
width: 100px;
min-height: 60px;
text-align: center;
border: 3px solid #666;
padding: 10px;
margin: 10px;
}
.err {
font-size: 8px;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="hero-unit">
<h1>Multicolumn in Bootstrap modal</h1>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal title</h4>
<div class='btn-group'>
<button class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown'><span class='caret'></span>
</button>
<ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'>
<li><a href='#'>Some Action</a>
</li>
<li class='divider'></li>
<li><a href='#'>Some Other Action</a>
</li>
</ul>
</div>
<--- This works but the ones in columns below do not render correctly in webkit. </div>
<div class="modal-body">
<div class="multicolumn-container">
<div class="box">1
<div class='btn-group'>
<button class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown'><span class='caret'></span>
</button>
<ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'>
<li><a href='#'>Some Action</a>
</li>
<li class='divider'></li>
<li><a href='#'>Some Other Action</a>
</li>
</ul>
</div>
<span class="err">This is rendered wrong in webkit browsers</span>
</div>
<div class="box">2
<div class='btn-group'>
<button class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown'><span class='caret'></span>
</button>
<ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'>
<li><a href='#'>Some Action</a>
</li>
<li class='divider'></li>
<li><a href='#'>Some Other Action</a>
</li>
</ul>
</div>
<span class="err">This is rendered wrong in webkit browsers</span>
</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
我在Windows 7上。Chrome最新版本。 – salihcenap 2014-09-26 10:00:10