我有这张表格，里面有人们的名字，还有几个星期，每周都有一些足球队的选择，我需要把它做成这样，里面所有名字的列都和每周的列一样，但每周的列越来越大除非我特别给它一个高度，但我不知 Prop 体有多大我只想让它随着条目的增加而变大。
<div class="container">
<div class="col-xs-3 text-center">
<div class="row bg-blue">Names</div>
<div class="row">Bob</div>
<div class="row">Alex</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
<div class="row">Steve</div>
</div>
<div class="col-xs-9 demo">
<div class="col-xs-3 item">
<div class="row bg-blue">Week 1</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 2</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 3</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 4</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 5</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 6</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 7</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 8</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 9</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 10</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 11</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 12</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
<div class="col-xs-3 item">
<div class="row bg-blue">Week 13</div>
<div class="row">Man C</div>
<div class="row">Arsen</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
<div class="row">Chel</div>
</div>
</div>
</div>
<br /><br />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/dragend.js"></script>
<script>
$(function() {
var BODY = $("body"),
container = $(".demo"),
pageElements;
$(window).on("ready resize", function(event) {
var width = $(this).width(),
itemsInPage = 1;
if (width > 1000) {
itemsInPage = 5
} else if (width > 600) {
itemsInPage = 4;
} else if (width > 400) {
itemsInPage = 2;
}
container.dragend({
pageContainer: "#container",
itemsInPage: itemsInPage,
pageClass: "item",
afterInitialize: function() {
this.container.style.visibility = "visible";
}
});
});
});
</script>
这是我使用的 CSS:
.demo {
background: #457;
cursor: hand;
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: grab;
color:#fff;
text-align: center;
height:50%;
}
.item {
background: #354;
}
.item:nth-child(2n+0) {
background: #333;
}
最佳答案
您的内联样式正在覆盖 Bootstrap 样式 col-xs-3 :
<div class="col-xs-3 item" style="margin: 0px; float: left; overflow-y: auto; overflow-x: hidden; padding: 0px; display: block; height: 320px; width: 171px;">
尝试删除 width: 171px;或将其添加到您的姓名列中。
关于html - 我怎样才能使这个 div 与另一列的大小相匹配？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44978496/