Bootstrap中的Progress Bar的布局问题

Question

我正在创建一个可以为用户提供推文列表的项目。加载推文时，页面显示了一个在瓷砖底部的进度条。换句话说，我正在创建一个看起来像这样的瓷砖：

+--------------+
|              |
|    [logo]    |
|              |
||||||||       |
+--------------+

连续的|代表进度栏。进度条应占据底部的全部宽度，并与瓷砖底部边框保持一致。但是，我的瓷砖这样呈现：

+--------------+
|              |
|  [logo]      |
|              |
|  ||||||||||  |
+--------------+

徽标是左对准而不是中心的。进度条是集中的，并占据了全部宽度。有一些填充物，我不想要。

当我查看下面的代码时，我无法弄清楚怎么了。

<style type="text/css">
  .choice {
    border: solid 1px #2d2d2d;
    color: #2d2d2d;
    padding: 16px 32px;
    margin-right: 16px;
    margin-left: 16px;
    clear:both;
    display:inline-block;
    position:relative;
  }
</style>
<div class="choice">
  <div class="fa fa-twitter"></div>
  <progress class="tweet-progress mb-0" value="50" min="0" max="100"></progress>
</div>

我缺少什么？

Answer 1

CSS中的任何内容都不会影响您正在加载字体真棒图标的<div>。没有什么可以告诉它是集中的或宽度为100％。解决应该获得您期望的结果的问题。

.choice {
    border: solid 1px #2d2d2d;
    color: #2d2d2d;
    padding: 16px 32px;
    margin-right: 16px;
    margin-left: 16px;
    clear:both;
    display:inline-block;
    position:relative;
  }
  
  .fa {
    width: 100%;
    text-align: center;
  }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="choice">
  <div class="fa fa-twitter"></div>
  <progress class="tweet-progress mb-0" value="50" min="0" max="100"></progress>
</div>

Answer 2

填充物来自选择，因此，如果您删除了填充物，请给出选择的高度和宽度，并绝对放置进度，您可以将其与底部齐平，而宽度则可以：100％使它占据了整个选择宽度。

.choice {
  border: solid 1px #2d2d2d;
    color: #2d2d2d;
    /* padding: 16px 32px; */
    margin-right: 16px;
    margin-left: 16px;
    clear: both;
    display: inline-block;
    position: relative;
    width: 130px;
    height: 35px;
  }
  
  .fa {
    width: 100%;
    text-align: center;
  }
  progress{
      width: 100%;
    position: absolute;
    bottom: -4px;
  }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="choice">
  <div class="fa fa-twitter"></div>
  <progress class="tweet-progress mb-0" value="50" min="0" max="100"></progress>
</div>