进度条和文字没有对齐

Question

我正在尝试将文本与进度条的一侧对齐。但是容器中的文本和进度条没有对齐。如何并排对齐它们？我在下面提供了 html 代码和问题的屏幕截图。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container" style="height: 250px;">
                <h3>Operating Systems</h3>
                <div class="row">
                    <div class="col-xs-3">Ubuntu</div>
                    <div class="col-xs-8">
                        <div class="progress" style="height: max-content;">
                            <div class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar" style="width: 75%"
                                aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"><strong>75%</strong></div>
                        </div>
                    </div>
                </div>
                </div>

Progress bar and their label are not aligned

Answer 1

@医学博士。沙吉杜尔·哈桑

答案在这里

用户 md 而不是 xs

.someSpace{
  padding:10px;
}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
              integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
              integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <div class="container" style="height: 250px;">
                    <h3>Operating Systems</h3>
      <div class="someSpace"></div>
                    <div class="row">
                        <div class="col-md-1">Ubuntu</div>
                        <div class="col-md-6">
                            <div class="progress" style="height: max-content;">
                                <div class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar" style="width: 75%"
                                    aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"><strong>75%</strong></div>
                            </div>
                        </div>
                    </div>
      <div class="row">
                        <div class="col-md-1">Ubuntu Fedora</div>
                        <div class="col-md-6">
                            <div class="progress" style="height: max-content;">
                                <div class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar" style="width: 75%"
                                    aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"><strong>75%</strong></div>
                            </div>
                        </div>
                    </div>
                    </div>

进度条和文字没有对齐

Progress bar and text are not aligned

html

css

frontend

web-frontend

bootstrap-4