Кнопка Bootstrap смещена вправо и содержит div

Question

У меня есть очень простая страница начальной загрузки, в которой есть div с колонкой кнопок. Без видимой причины кнопки слегка смещены вправо:

Содержащий div (как выделено выше) не имеет отступов или полей:

икнопки имеют одинаковое поле с обеих сторон:

html:

<div class="cinema-list" style="max-width: 700px;" class="m-auto">
    <h2>Select Cinema</h2>

    <div class="form-group">
        <label for="cinemaSearchInput">Search</label>
        <input 
            type="text" 
            class="form-control" 
            id="cinemaSearchInput" 
            placeholder="Cinema name..."
            [(ngModel)]="searchString"
            >
    </div>

    <div *ngIf="cinemaList != null">

        <button 
            *ngFor="let cinema of cinemaList" 
            type="button"
            class="btn btn-primary cinema-button m-1 w-100"
            (click)="selectCinema(cinema)"
            >
            <span>{{cinema.name}}</span>
            <i 
                *ngIf="isFavoriteCinema(cinema)"
                class="fa fa-heart pl-1 heart" 
                aria-hidden="true"></i>
        </button>

    </div>

    <div 
        *ngIf="cinemaList == null" 
        class="d-flex align-items-center pt-2">
            <span class="spinner-border text-primary mr-2"></span>
            <span>Loading...</span>
    </div>
</div>

и scss:

.cinema-list{
    .cinema-button{
        display: block;
    }

    .cinema:hover{
        background-color: $primary;
    }
}

Я не вижу причин, почему кнопки смещены. Это ошибка с начальной загрузкой?

Это Boostrap 4.3.1

Спасибо

Answer 1

Пожалуйста, используйте my-1 и mx-0 класс вместо m-1 класс.

        <button 
            *ngFor="let cinema of cinemaList" 
            type="button"
            class="btn btn-primary cinema-button my-1 mx-0 w-100"
            (click)="selectCinema(cinema)"
            >
            <span>{{cinema.name}}</span>
            <i 
                *ngIf="isFavoriteCinema(cinema)"
                class="fa fa-heart pl-1 heart" 
                aria-hidden="true"></i>
        </button>

Answer 2

Ответ Алока Мали устраняет проблему.

Я не вижу причин, почему кнопки смещены. Это ошибка с начальной загрузкой?

Нет, так устроен CSS.

Это основная причина, по которой это происходит.

В Bootstrap по умолчанию все элементы имеют box-sizing:border-box;

Это делается с помощью reset.scss

*,
*::before,
*::after {
  box-sizing: border-box; // 1
}

Для border-box свойства ширины и высоты элемента включают содержимое, отступы и границы , но не включают поля . В вашем случае у вас есть запас .25em, когда вы применили класс m-1, поэтому ваш элемент (в данном случае кнопка) переполнен.

Подробнее о box-sizing здесь

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

Answer 3

Это потому, что вы добавили класс m-1 в кнопку. удалите этот класс из него.

Замените

 class="btn btn-primary cinema-button m-1 w-100"

на

 class="btn btn-primary cinema-button w-100"

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