没有html表的Bootstrap flex等宽列

Posted

技术标签:

【中文标题】没有html表的Bootstrap flex等宽列【英文标题】：Bootstrap flex equal width columns without html table 【发布时间】：2021-02-03 21:03:54 【问题描述】：

这种弹性布局有没有办法在不使用表格的情况下让分数正确排列？突出显示的部分应如上和下正确排列，但由于 9 的长度小于 15，因此列看起来不均匀。是否可以在表格外使用 flex 来完成此任务？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width:400px">
    <div class="card-header text-center d-flex justify-content-center">
        <div class="mr-1 flex-shrink-0" style="min-width:0" data-bind="html: TimeFormatted">3:10 PM EDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1">Wabash Valley Family Sports Center</span> (<span>Larry Wilson Court</span>)</div>
    </div>
    <div class="card-body">
        <div class="d-flex">
            <div class="text-truncate mr-auto">
                    <a target="_blank" href="/157555/fall-volleyball-league/teams/team-christner?divisionteamid=1591685">Team Christner</a><span data-bind="visible: AwayTeamExhibition" style="display: none;">*</span>
            </div>
            <div class="d-flex">
                <span class="final-score">1</span>
                <span class="other-score font-weight-normal ml-2">14</span>
                
                <span class="other-score font-weight-normal ml-2">25</span>
                
                <span class="other-score font-weight-normal ml-2">9</span>
            </div>
        </div>
        <div class="d-flex font-weight-bold">
            <div class="text-truncate mr-auto">
                    <a target="_blank" href="/157555/fall-volleyball-league/teams/team-mikuly?divisionteamid=1591686">Team Mikuly</a><span 
 style="display: none;">*</span>
        
            </div>
            <div class="d-flex">
                <span class="final-score">2</span>

                <span class="other-score font-weight-normal ml-2">25</span>
                
                <span class="other-score font-weight-normal ml-2">12</span>
                
                <span class="other-score font-weight-normal ml-2">15</span>
            </div>
        </div>
    </div>
    <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>3rd-5th Grade</span>, <span>Pool A</span></div>
        <div class=""">Final</div>
    </div>
    <div class="card-footer text-center">
           
            <a target="_blank" title="Directions" href="http://maps.apple.com/maps?daddr=39.4564711,-87.2602811" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i></a>
               
         
    </div>
</div>

【问题讨论】：

也许你可以有一个设置宽度的容器，在里面你使用 col 4 次（没有任何东西，所以它会自动分割）并在前 4 个元素之后使用 w-100 中断？ 我认为让它们左对齐也会有所帮助。 @AlePlo 它是左对齐的，只剩下一个边距 【参考方案1】：

您可以使用网格。

使卡片主体成为一个容器，然后使用您在 sn-p 中看到的行和列。我将名称列设置为.col-6 以占用一半宽度，将分数列设置为.col 以占用均匀的剩余空间。我还给出了分数列.text-right 和.text-monospace，以确保数字列也排成一行。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width:400px">
  <div class="card-header text-center d-flex justify-content-center">
    <div class="mr-1 flex-shrink-0" style="min-width:0" data-bind="html: TimeFormatted">3:10 PM EDT</div>
    <div class="d-flex text-truncate">
      @<span class="text-truncate mx-1">Wabash Valley Family Sports Center</span> (<span>Larry Wilson Court</span>)
    </div>
  </div>
  <div class="card-body container">

    <div class="row">

      <div class="col-6 text-truncate">
        <a target="_blank" href="/157555/fall-volleyball-league/teams/team-christner?divisionteamid=1591685">Team Christner</a><span data-bind="visible: AwayTeamExhibition" style="display: none;">*</span>
      </div>

      <span class="col text-right text-monospace final-score">1</span>
      <span class="col text-right text-monospace other-score font-weight-normal">14</span>
      <span class="col text-right text-monospace other-score font-weight-normal">25</span>
      <span class="col text-right text-monospace other-score font-weight-normal">9</span>

    </div>

    <div class="row font-weight-bold">

      <div class="col-6 text-truncate">
        <a target="_blank" href="/157555/fall-volleyball-league/teams/team-mikuly?divisionteamid=1591686">Team Mikuly</a><span style="display: none;">*</span>
      </div>

      <span class="col text-right text-monospace final-score">2</span>
      <span class="col text-right text-monospace other-score font-weight-normal">25</span>
      <span class="col text-right text-monospace other-score font-weight-normal">12</span>
      <span class="col text-right text-monospace other-score font-weight-normal">15</span>

    </div>
  </div>
  <div class="card-footer d-flex">
    <div class="text-truncate mr-auto"><span>3rd-5th Grade</span>, <span>Pool A</span></div>
    <div class="">Final</div>
  </div>
  <div class="card-footer text-center">

    <a target="_blank" title="Directions" href="http://maps.apple.com/maps?daddr=39.4564711,-87.2602811" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i></a>


  </div>
</div>

【讨论】：

【参考方案2】：

如果您使用 Bootstrap-4，则不需要编写自定义 css 属性，有 predefine classes 用于宽度，例如 class w-50 表示 width: 50%，如果您想将元素转移到右侧，请在显示 flex 中使用类 justify-content-end。 p> 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card" style="width:400px">
    <div class="card-header text-center d-flex justify-content-center">
        <div class="mr-1 flex-shrink-0" style="min-width:0" data-bind="html: TimeFormatted">3:10 PM EDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1">Wabash Valley Family Sports Center</span> (<span>Larry Wilson Court</span>)</div>
    </div>
    <div class="card-body">
        <div class="d-flex">
            <div class="w-50 text-truncate mr-auto">
                <a target="_blank" href="/157555/fall-volleyball-league/teams/team-christner?divisionteamid=1591685">Team Christner</a><span data-bind="visible: AwayTeamExhibition" style="display: none;">*</span>
            </div>
            <div class="w-50 d-flex justify-content-end">
                <span class="final-score">1</span>
                <span class="other-score font-weight-normal ml-2">14</span>
                <span class="other-score font-weight-normal ml-2">25</span>
                <span class="other-score font-weight-normal ml-2">9</span>
            </div>
        </div>
        <div class="d-flex font-weight-bold">
            <div class="w-50 text-truncate mr-auto">
                <a target="_blank" href="/157555/fall-volleyball-league/teams/team-mikuly?divisionteamid=1591686">Team Mikuly</a><span style="display: none;">*</span>
            </div>
            <div class="w-50 d-flex justify-content-end">
                <span class="final-score">2</span>
                <span class="other-score font-weight-normal ml-2">25</span>
                <span class="other-score font-weight-normal ml-2">12</span>
                <span class="other-score font-weight-normal ml-2">15</span>
            </div>
        </div>
    </div>
    <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>3rd-5th Grade</span>, <span>Pool A</span></div>
        <div class="">Final</div>
    </div>
    <div class="card-footer text-center">
        <a target="_blank" title="Directions" href="http://maps.apple.com/maps?daddr=39.4564711,-87.2602811" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Map</a>
    </div>
</div>

【讨论】：

【参考方案3】：

就像 Temani Afif 的建议一样，您可以将 min-width 用于分数，您也可以将 min-width 用于整个 div 并将 justify-content 用作空间均匀。但请注意，如果您是动态分数，并且宽度大于最小宽度，它将不会在此答案中均匀对齐。

.score
  min-width:100px;
  justify-content:space-evenly;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width:400px">
    <div class="card-header text-center d-flex justify-content-center">
        <div class="mr-1 flex-shrink-0" style="min-width:0" data-bind="html: TimeFormatted">3:10 PM EDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1">Wabash Valley Family Sports Center</span> (<span>Larry Wilson Court</span>)</div>
    </div>
    <div class="card-body">
        <div class="d-flex">
            <div class="text-truncate mr-auto">
                    <a target="_blank" href="/157555/fall-volleyball-league/teams/team-christner?divisionteamid=1591685">Team Christner</a><span data-bind="visible: AwayTeamExhibition" style="display: none;">*</span>
            </div>
            <div class="d-flex score">
                <span class="final-score">1</span>
                <span class="other-score font-weight-normal ml-2">14</span>
                
                <span class="other-score font-weight-normal ml-2">25</span>

                
                <span class="other-score font-weight-normal ml-2">9</span>
            </div>
        </div>
        <div class="d-flex font-weight-bold">
            <div class="text-truncate mr-auto">
                    <a target="_blank" href="/157555/fall-volleyball-league/teams/team-mikuly?divisionteamid=1591686">Team Mikuly</a><span 
 style="display: none;">*</span>
        
            </div>
            <div class="d-flex score">
                <span class="final-score">2</span>

                <span class="other-score font-weight-normal ml-2">25</span>
                
                <span class="other-score font-weight-normal ml-2">12</span>
                
                <span class="other-score font-weight-normal ml-2">15</span>
            </div>
        </div>
    </div>
    <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>3rd-5th Grade</span>, <span>Pool A</span></div>
        <div class=""">Final</div>
    </div>
    <div class="card-footer text-center">
           
            <a target="_blank" title="Directions" href="http://maps.apple.com/maps?daddr=39.4564711,-87.2602811" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i></a>
               
         
    </div>
</div>

【讨论】：

【参考方案4】：

给分数一个等于两个数字的min-width（或width）

[class*="score"] 
  min-width:2ch;
  text-align:right;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width:400px">
    <div class="card-header text-center d-flex justify-content-center">
        <div class="mr-1 flex-shrink-0" style="min-width:0" data-bind="html: TimeFormatted">3:10 PM EDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1">Wabash Valley Family Sports Center</span> (<span>Larry Wilson Court</span>)</div>
    </div>
    <div class="card-body">
        <div class="d-flex">
            <div class="text-truncate mr-auto">
                    <a target="_blank" href="/157555/fall-volleyball-league/teams/team-christner?divisionteamid=1591685">Team Christner</a><span data-bind="visible: AwayTeamExhibition" style="display: none;">*</span>
            </div>
            <div class="d-flex">
                <span class="final-score">1</span>
                <span class="other-score font-weight-normal ml-2">14</span>
                
                <span class="other-score font-weight-normal ml-2">25</span>
                
                <span class="other-score font-weight-normal ml-2">9</span>
            </div>
        </div>
        <div class="d-flex font-weight-bold">
            <div class="text-truncate mr-auto">
                    <a target="_blank" href="/157555/fall-volleyball-league/teams/team-mikuly?divisionteamid=1591686">Team Mikuly</a><span 
 style="display: none;">*</span>
        
            </div>
            <div class="d-flex">
                <span class="final-score">2</span>

                <span class="other-score font-weight-normal ml-2">25</span>
                
                <span class="other-score font-weight-normal ml-2">12</span>
                
                <span class="other-score font-weight-normal ml-2">15</span>
            </div>
        </div>
    </div>
    <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>3rd-5th Grade</span>, <span>Pool A</span></div>
        <div class=""">Final</div>
    </div>
    <div class="card-footer text-center">
           
            <a target="_blank" title="Directions" href="http://maps.apple.com/maps?daddr=39.4564711,-87.2602811" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i></a>
               
         
    </div>
</div>

【讨论】：

学到了。 '最小宽度：2ch;'看起来很棒！ 对此答案有 1 条评论，最小宽度应设置为分数的可能最大长度。如果最大分数是100，那么应该设置为3ch，如果是99，2ch应该足够了。

以上是关于没有html表的Bootstrap flex等宽列的主要内容，如果未能解决你的问题，请参考以下文章

等宽布局和flex

使用等宽列时，引导列显示在彼此下方

为啥我在 Bootstrap 4 中的 cols flex-grow 没有对齐？

Bootstrap 4 Navbar 列大小不是 100%

Bootstrap-栅格系统

bootstrap 设置table - td宽度问题