如何使用引导程序将文本放在进度条旁边？答案

【问题标题】：How to put a text side by a progress bar with bootstrap?如何使用引导程序将文本放在进度条旁边？
【发布时间】：2017-04-22 04:00:29
【问题描述】：

我希望这些文本设置如下：

Java ---------进度条------------

C# ---------进度条-----------

这是我当前的代码：

<div class="container">
                <p>
                    C#
                </p>
                <div class="progress" id="prog1">
                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                    <span class="sr-only">20% Complete</span>
                    </div>
                </div>
            </div>

【问题讨论】：

标签： html twitter-bootstrap web progress-bar subtitle

【解决方案1】：

<div class="container">
      <p class="col-sm-1">
          C#
      </p>
      <div class="progress col-sm-11" id="prog1">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                <span class="sr-only">20% Complete</span>
            </div>
      </div>
</div>

【讨论】：

【解决方案2】：

<div class="container">
  <div class ="row">
    <div class ="col-sm-1">
      <p> C# </p>
    </div>
    <div class="col-sm-11">
      <div class="progress" id="prog1">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
          <span class="sr-only">20% Complete</span>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

几乎没有任何变化，伙计：/