Bootstrap Center две полосы хода с ограниченной шириной?

Я пытаюсь центрировать два индикатора выполнения над элементом холста HTML.Bootstrap Center две полосы хода с ограниченной шириной?

Я пробовал различные Загрузочные классы, а также изменения CSS, и я просто не могу заставить его работать, если я просто добавить к краю левого бара. Любая помощь приветствуется.

HTML

<div class="container"> 
    <div class="row"> 
     <div id="scoreBoardLeft" class="col-xs-6 text-right"><a href="#" id="leftScore" class="btn btn-default"></a></div> 
     <div id ="scoreBoardRight" class="col-xs-6"><a href="#" id="rightScore" class="btn btn-default"></a></div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-6 progress progress-striped active"> 
      <div class="progress-bar" style="width: 45%"></div> 
     </div> 
     <div class="col-xs-6 progress progress-striped active"> 
      <div class="progress-bar" style="width: 45%"></div> 
     </div> 
    </div> 
    <div class="row"> 
     <div id="pong" class="col-xs-12 text-center"></div> 
    </div> 
</div>

CSS

* { 
    padding: 0; margin: 0; 
} 

canvas { 
    background: #eee; 
    display: block; 
    margin: 0 auto; 
} 

#scoreBoardLeft { 
    padding-right: 1px; 
} 

#scoreBoardRight { 
    padding-left: 1px; 
} 

#leftScore { 
    width: 35px !important; 
} 

#rightScore { 
    width: 35px !important; 
} 


.progress { 
    margin-bottom: 1px !important; 
    margin-left: auto !important; 
    margin-right: auto !important; 
    height: 10px !important; 
    width: 300px !important; 
}

источник

2017-01-18 RaSedg

Проблема, кажется, в том, что вы установили:

.progress { 
    width: 300px !important; 
}

Флаг !important является перезапись width:50% для col-xs-6 установленного Bootstrap.

Простое удаление этой строки, кажется, чтобы исправить эту проблему :)

Я создал скрипку, демонстрирующее это, что можно найти here.

Надеюсь, это поможет!

Edit Для Ограничить Ширина:

Проблема с ограничением ширины с текущей разметки является то, что вам нужно будет установить поля в том же классе, что и колонны Bootstrap, которая будет толкать элементы к следующему line с вашей текущей разметкой HTML.

Я бы рекомендовал заменить:

<div class="col-xs-6 progress progress-striped active"> 
    <div class="progress-bar" style="width: 45%"></div> 
</div>

С:

<div class="col-xs-6"> 
    <div class="progress progress-striped active"> 
     <div class="progress-bar" style="width: 45%"></div> 
    </div> 
</div>

Добавив в этот новый DIV и изменения структуры, как указано выше, можно модифицировать width из .progress, как вы пытаетесь сделать это в первую очередь, и это будет иметь желаемый эффект :)

Я создал новую скрипку, изменил ее и дал барам ширину 30% чтобы отразить изменения, которые, как я думаю, вы ищете :)

Новая скрипка находится here.

источник

2017-01-18 02:38:10

Благодарим за ответ! Но теперь, когда индикаторы прогресса центрированы, как я могу ограничить их ширину, мне нужно добавить дополнительные столбцы влево и вправо, чтобы заполнить это пространство. – RaSedg

Я обновил свой ответ, чтобы показать, как полосы могут иметь ограниченную ширину.По иронии судьбы, на самом деле это означает возврат к тому, что вы в основном делаете в первую очередь, и просто небольшое изменение HTML. Надеюсь, это то, что вы искали :) –

Чтобы решить мою проблему, мне пришлось отключить отзывчивость в бутстрапе. Затем я устанавливаю ширину моего контейнера сетки, равную ширине моего элемента холста.

Boostrap был, вероятно, не лучшим выбором, так как я не хотел реагировать на сетку, извлеченные уроки.

Diable bootstrap responsiveness

источник

2017-01-18 15:16:57 RaSedg

Bootstrap Center две полосы хода с ограниченной шириной?

ответ

Смежные вопросы