引导列不在同一行中对齐 [英] Bootstrap columns not aligning in the same row

问题描述

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

解决方案

从

$


• 容器提供了将网站内容居中的方法。对于固定宽度使用 .container 或对于全宽使用 .container-fluid 。




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

内容应放置在列中，可能是行的直接子节点。

换句话说， div class ='row'需要位于代码中 div class ='container'中。

  .sports-container {background-color：whitesmoke; margin-top：20px;}  

< link rel = stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.cssintegrity =sha384- / Y6pD6FV / Vv2HJnA6t + vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6Mcrossorigin =anonymous> ;< div class =container sports-container col-md-12> < div class =row> < div class =col-md-4>< a class =btn btn-outline-info>棒球< / a>< / div> < div class =col-md-4>< a class =btn btn-outline-info>曲棍球< / a>< / div> < div class =col-md-4>< a class =btn btn-outline-info> Tennis< / a>< / div> < / div>< / div>

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:

• Containers provide a means to center your site’s contents. Use .container for fixed width or .container-fluid for full width.

• Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on .row to ensure all your content is aligned properly down the left side.

• Content should be placed within columns, and only columns may be immediate children of rows.

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>

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