本文介绍了引导列不在同一行中对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
试图动态地呈现按钮并在每一行放置3个按钮,但它们在屏幕上都出现在单独的一行中?
< div class =row>
< div class =container sports-container col-md-12>
@foreach(Model.Aggregator.SportsRepository.List()中的var sport)其中(x => x.ParentSportId == null))
{
< div类= COL-MD-4 >
< a class =btn btn-outline-info> @ sport.Description< / a>
< / div>
}
< / div>
<风格>
.sports-container {
background-color:whitesmoke;
margin-top:20px;
}
< / style>
解决方案
换句话说, div class ='row'
需要位于代码中 div class ='container'
中。
<div class="row">
<div class="container sports-container col-md-12">
@foreach (var sport in Model.Aggregator.SportsRepository.List().Where(x => x.ParentSportId == null))
{
<div class="col-md-4">
<a class="btn btn-outline-info">@sport.Description</a>
</div>
}
</div>
<style>
.sports-container {
background-color: whitesmoke;
margin-top: 20px;
}
</style>
From the Bootstrap documentation:
In other words, div class='row'
needs to be inside div class='container'
in your code.
.sports-container {
background-color: whitesmoke;
margin-top: 20px;
}
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
<div class="container sports-container col-md-12">
<div class="row">
<div class="col-md-4"><a class="btn btn-outline-info">Baseball</a></div>
<div class="col-md-4"><a class="btn btn-outline-info">Hockey</a></div>
<div class="col-md-4"><a class="btn btn-outline-info">Tennis</a></div>
</div>
</div>
这篇关于引导列不在同一行中对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!