Bootstrap 删除按钮左侧的 space

Question

出于某种原因，我的第一个按钮前面有一个 space，我无法摆脱它。

<div class="container">
<div class="row">
    <div class="col-xs-4 col-md-3">
        <button @onclick="ShowModal" class="btn btn-primary"><i class="oi oi-plus"></i>New Member</button>
    </div>
    <div class="col-xs-4 col-md-3" style="margin:auto">
        <button @onclick="@RefreshData" class="btn btn-primary"><i class="oi oi-loop-circular"></i> Refresh Data</button>
    </div>
    <div class="input-group col-xs-4 col-md-4 offset-md-5">
        <input type="text" class="form-control" placeholder="Search Members" @bind="@searchTerm" />
        <div class="input-group-append">
            <button @onclick="@SearchMember" class="btn btn-primary"><i class="oi oi-magnifying-glass"></i></button>
        </div>
    </div>
</div>

这是它的样子

这会强制搜索到下一行。我该如何解决这个问题？

Answer 1

边距有问题；只要确保你摆脱了左边距。如果您对 space 是什么有疑问，请查看开发工具中的元素，它通常会帮助您解决问题。

div.container {
  margin-left: 0px
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
    <div class="col-xs-4 col-md-3">
        <button @onclick="ShowModal" class="btn btn-primary"><i class="oi oi-plus"></i>New Member</button>
    </div>
    <div class="col-xs-4 col-md-3" style="margin:auto">
        <button @onclick="@RefreshData" class="btn btn-primary"><i class="oi oi-loop-circular"></i> Refresh Data</button>
    </div>
    <div class="input-group col-xs-4 col-md-4 offset-md-5">
        <input type="text" class="form-control" placeholder="Search Members" @bind="@searchTerm" />
        <div class="input-group-append">
            <button @onclick="@SearchMember" class="btn btn-primary"><i class="oi oi-magnifying-glass"></i></button>
        </div>
    </div>
</div>

Bootstrap 删除按钮左侧的 space

Bootstrap remove space on left of button

html

containers

bootstrap-modal

bootstrap-4