html - Bootstrap 按钮移到包含 div 的右侧

Question

我有一个非常简单的 Bootstrap 页面，其中有一个包含一列按钮的 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;
    }
}

我看不出按钮移动的任何原因。这是 Bootstrap 的错误吗？

这是 boostrap 4.3.1

谢谢

Answer 1

这是因为你在按钮中添加了class m-1。请从中删除该类。

替换

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

与

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

希望对您有所帮助。