我想使用"nowrap"或任何其他替代方法以与(无序列表)相同的方式阻止col-md-8在col-md-4上的堆叠.
下面是我的片段,我还提到了每个颜色的盒子的类.
谢谢.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#outside-container {
border: 2px solid red;
height: 500px;
white-space: nowrap;
}
#container1 {
border: 2px solid green;
height: 300px;
}
#colmd8 {
border: 2px solid yellow;
height: 400px;
}
#row1 {
border: 2px solid pink;
}
#list1 {
border: 2px solid red;
width: 200px;
height: 200px;
}
#container2 {
border: 2px solid navy;
height: 300px;
}
li {
display: inline-block;
}
ul {
white-space: nowrap;
}
#col4 {
border: …我在html代码中有5个分区,在第一个分区后,已经放置了一个"显示更多"按钮.我想触发一个jquery命令,它显示第二个分区,单击"显示更多"按钮一次,第三个分区再次单击按钮,依此类推.
问题是我只能显示第二个分区而不能第二次触发jquery脚本来显示第三个分区.
下面是我的Jquery和html.
$(document).ready(function(){
for(i=2;i<=5;i++)
{
$("#"+i).hide();
}
i=2; /* degrade the value of i */
$("button").on("click",function(){
//alert(i);
$("#button").remove();
$("#"+i).show();
var button="<button id='button' class='btn btn-primary'>show more</button>";
$("#"+i).after(button);
i=i+1;
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12" id="1" style="border:1px solid red; height:200px; width:300px;"></div>
<button id='button' class='btn btn-primary'>show more</button>
<div class="col-md-4 col-sm-6 col-xs-12" id="2" style="border:1px solid red; height:200px; width:300px;"></div>
<div class="col-md-4 col-sm-6 col-xs-12" id="3" …