Блог

Я охотился на высокие и низкие уровни, и я на 90% убежден, что моя проблема связана с плавающими элементами и что ответом на мою проблему является правильное применение clear .

К сожалению, я недостаточно хорошо разбираюсь в CSS, чтобы знать, где применить исправление, и взлом его, похоже, не помогает мне, может кто-нибудь помочь?

Я хочу well , чтобы он расширялся, чтобы охватить элементы моего загрузочного столбца и их дочерние элементы.

У меня есть следующий HTML-код в CodePen, если вы хотите взглянуть на него вживую:

 <div class="container-fluid">
    <div class="well">
        <div class="col-md-1">
            <button type="button" class="btn btn-success" ng-click="upVote(vote)"><i class="fa fa-2x fa-thumbs-up"></i></button>
            <button type="button" class="btn btn-danger" ng-click="downVote(vote)"><i class="fa fa-2x fa-thumbs-down"></i></button>
        </div>
        <div class="col-md-10">
            <label> Sample title field</label>
            <div class="basic-panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
            desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        </div>
        <div class="col-md-1" style="text-align: center;">
            <div>Score</div>
            <span class="badge" style="font-size: 42px !important;">42</span>
        </div>
    </div>
</div>
 

Проблема здесь в том, что вы не включаете row элемент для хранения всех col div ‘s.

Итак, все, что вам нужно сделать, это добавить класс row к тому же div , в котором находится ваш класс well .

Вот так:

 <div class="container-fluid">
<div class="well row">
    <div class="col-md-1">
        <button type="button" class="btn btn-success" ng-click="upVote(vote)"><i class="fa fa-2x fa-thumbs-up"></i></button>
        <button type="button" class="btn btn-danger" ng-click="downVote(vote)"><i class="fa fa-2x fa-thumbs-down"></i></button>
    </div>
    <div class="col-md-10">
        <label> Sample title field</label>
        <div class="basic-panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
    <div class="col-md-1" style="text-align: center;">
        <div>Score</div>
        <span class="badge" style="font-size: 42px !important;">42</span>
    </div>
</div>
 

Вот загрузочный файл, который даст вам наглядное представление.

Теперь, поскольку a row может содержать только до 12 столбцов.. вы не сможете добавить что-либо еще col внутри, row так как 1 10 1 = 12… вам придется создать еще row один, если, конечно, вы не уменьшите свой текущий col размер.

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