Question

我正在尝试在居中徽标下方的空白处添加进度条。但由于我使用容器流体，我不能使用“align-items-end”因为由于某种原因它更多地扩展了容器高度。有人可以告诉我应该如何更改这个，这样我就可以在徽标下面添加一个进度条，而不是搞乱“创建”和“探索”定位？在这个JSFiddle链接中，我添加了我正在使用的代码。 https://jsfiddle.net/mrwadepro/zzf5j3fm/13/

以下是我要添加的进度条

    <div class="row align-items-end">
      <div class="row">
   <div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
  </div>
      </div>
</div>

Answer 1

你有一个Bootstrap .row立即嵌套在另一个.row中。你永远不应该那样做。嵌套时.row必须始终跟随至少一个Bootstrap列。此外，在这种情况下，嵌套是完全没有必要的。

您还使用了大量不必要的自定义CSS。这是不必要的，因为这些任务可以通过使用本机Bootstrap 4类来完成。当你引入不必要的自定义css hacks时，你将不可避免地需要更多自定义css hacks来修复原始css hacks引起的问题。

这是一个干净的代码片段，无需任何自定义CSS并且没有align-items-end类（点击下面的“运行代码段”）即可完成工作：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
   <div class="row">
       <div class="col text-center">
           <img src="http://i65.tinypic.com/29kpg7p.png" width="100" height="140">
       </div>
   </div>
    <div class="row align-items-center">
        <div class="col-6">
            <a href="#" name="redirectCreate" onClick="redirectCreate()">
                <h1 class="text-center">
                    Create</h1>
            </a>
        </div>
        <div class="col-6 text-center">
            <a href="#" name="redirectExplore" onClick="redirectExplore()">
                <h1 class="text-center">
                    Explore</h1>
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
            </div>
        </div>
    </div>
</div>

使用Bootstrap进行HTML定位

1 个答案: