引导列不在同一行中对齐

引导列不在同一行中对齐

本文介绍了引导列不在同一行中对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

试图动态地呈现按钮并在每一行放置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'中。

Trying to render dynamically buttons and place 3 buttons in each row but they appear on the screen all in a separate row?

 <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>

这篇关于引导列不在同一行中对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 03:39
查看更多