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

From the Bootstrap documentation:

Containers provide a means to center your site’s contents. Use const string dirTemp= "Temp"; public void PurgeFiles() { DateTime datePurge= new DateTime(); datePurge= DateTime.Now.AddDays(-7); var files= FindFiles(); foreach (string file in files) { var dateAlt = Directory.GetLastWriteTime(file); if (dateAlt< datePurge) { Directory.Delete(file); } } } private string[] FindFiles() { string searchPattern; string dirLocal; dirLocal= Path.GetTempPath(); dirLocal= Path.Combine(dirLocal, dirTemp); if (Directory.Exists(dirLocal)) { searchPattern = "*.Env"; var files = Directory.GetFiles(dirLocal, searchPattern); return files; } else return new string[0]; } for fixed width or public bool SaveFile(string dir, string fileName, string content) { try { if (!Directory.Exists(dir)) Directory.CreateDirectory(dir); string pathFile = Path.Combine(dir, fileName); if (File.Exists(pathFile)) return true; //Salva os dados StreamWriter fileConf = new StreamWriter(pathFile); fileConf.Write(content); fileConf.Flush(); fileConf.Close(); return true; } catch (Exception ex) { return false; } } 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, public void MarkFile(string fileName) { try { string newFileName= fileName + ".env"; if (File.Exists(newFileName)) return; File.Move(fileName , newFileName); } catch (Exception ex) { throw new Exception(ex.Message); } } needs to be inside .container in your code.

.container-fluid

div class='row'

Bootstrap列未在同一行中对齐

1 个答案: