时间戳

首页 > 解决方案 > Bootstrap删除按钮左侧的空间

html - Bootstrap删除按钮左侧的空间

问题描述

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

<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>

这看起来如何

在此处输入图像描述 这会强制搜索继续到下一行。我怎样才能解决这个问题？

标签： htmlbootstrap-4containersbootstrap-modal

解决方案

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

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>

推荐阅读