Индикатор выполнения и текст не выровнены - PullRequest
Новая
       62

Индикатор выполнения и текст не выровнены

0 голосов
/ 29 мая 2020

Я пытаюсь выровнять текст по стороне индикатора выполнения. но текст и индикатор выполнения в контейнере не выравниваются. Как мне выровнять их бок о бок? Я предоставил код 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>

Индикатор выполнения и их метка не выровнены

1 Ответ

0 голосов
/ 29 мая 2020

@ мкр. Шаджедул Хасан

Вот ответ

User 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>
...