Проблема со скрытием переполнения в Bootstrap CSS

#css #twitter-bootstrap #twitter-bootstrap-3

Вопрос:

Не могли бы вы взглянуть на эту демонстрацию и сообщить мне, почему overflow:hidden правило css не работает для .switch класса? Пожалуйста, имейте в виду, что я не хочу ничего менять в кнопках и переключателях, и мне нужно сохранить их такими, какие они есть (не должны изменять col-lg-x размеры)

 <div class="panel panel-default">
    <div class="panel-heading">Switch</div>
    <div class="panel-body">
        <div class="row">
           <div class="switch col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10">
                <button class="btn btn-primary norightradius col-lg-1 col-md-1 col-sm-1 col-xs-1">Yes</button>
                <button class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-11 col-xs-11">New Model</button>
                <button class="btn btn-primary noleftradius col-lg-1 col-md-1 col-sm-1 col-xs-1">No</button>
           </div>
        </div>
    </div>
</div>

Вот снимок требуемого результата

введите описание изображения здесь

1. Я удалил свой ответ, поскольку он, вероятно, не относится к вашему объяснению, но, возможно, если вы обновите вопрос и найдете пример или скриншот желаемого результата, это поможет.

2. Хорошо, Дэн, спасибо в любом случае, я обновил вопрос скриншотом результата

Ответ №1:

Сеточная система Bootstrap основана на 12 столбцах. Если вы сложите столбцы, используемые вашей кнопкой «Да», строкой заголовка и кнопкой «Нет», вы увидите, что у вас есть 13 столбцов.

Просто измените размер строки заголовка, чтобы в ней было 10 столбцов вместо 11.

Изменить

 <button class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-11 col-xs-11">New Model</button>

Для

 <button class="btn btn-primary noradius col-lg-10 col-md-10 col-sm-10 col-xs-10">New Model</button>

См. http://jsfiddle.net/wilsonjonash/Fz4CW/6 /

И если вы хотите, чтобы кнопка была скрыта при определенных размерах экрана, попробуйте использовать адаптивные служебные классы (например hidden-sm , или hidden-xs ): http://getbootstrap.com/css/#responsive-utilities

О, и почему он заворачивается? Классы bootstrap grid используются float:left для упорядочивания элементов сетки. overflow:hidden эффект заключается только в том, что он содержит поплавки, а не скрывает их.