Bootstrap 列未在同一行中对齐

Question

尝试动态呈现按钮并在每行中放置 3 个按钮，但它们都出现在屏幕上的单独一行中？

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

Answer 1

来自Bootstrap 文档：

• 容器提供了一种使站点内容居中的方法。使用.container固定宽度或.container-fluid全宽度。

• 行是水平的列组，可确保您的列正确排列。我们在 .row 上使用负边距方法来确保您的所有内容都在左侧正确对齐。

• 内容应该放在列中，并且只有列可以是行的直接子项。

换句话说，div class='row'需要div class='container'在你的代码里面。

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