Bootstrap删除按钮左侧的空间

Question

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

<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

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

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>