如何让输入字段用空格分隔？

Question

我无法将文本框和按钮用空格分隔，但在一行中，有人可以向我解释 span 的实际作用吗？

<div class="container">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#custom-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="index.html">GLOW</a>

        <div class="col-sm-5 pull-right hidden-md hidden-print hidden-sm hii" style="padding-top:10px">
            <form action="login.asp" method="post" name="Form1">
                <div class="input-group">
                    <input class="form-control" type="text" id="txtLogin" name="txtLogin" placeholder="Login" data-validation-required-message="Please enter your login ID." required="required"/><span class="input-group-btn">
                    <input class="form-control" type="password" id="txtPass" name="txtPass" placeholder="Password" data-validation-required-message="Please enter your email address." required="required"/>
                    <button class="btn btn-g btn-round" id="btnlogin" type="submit">Login</button></span>
                </div>
            </form>
        </div>
    </div>
</div>

如果我将  放在两个文本字段之间，我最终会是这样：

添加了我的 CSS 代码

.container { width:1170px }

.container-fluid > .navbar-collapse,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container > .navbar-header { 
    margin-right:0;
    margin-left:0
}

.col-sm-5 { width:41.66666667% }

.input-group {
    position:relative;
    display:table;
    border-collapse:separate
}

.form-control {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    height: 33px;
    border: 1px solid #EAEAEA;
    border-radius: 2px;
    transition: all 0.4s ease-in-out 0s;
}

.input-group-btn{
    position:relative;
    font-size:0;
    white-space:nowrap
}

Answer 1

您需要更改标记才能使用 Bootstrap 解决此问题。即：

• 删除登录字段后的<span>（以及按钮后的关闭</span>），因为它不在正确的位置，而且.input-group-btn 类不是您要在此处使用的类。
• 只需将按钮包装到<div class="input-group-append">。
• 从.input-group 和.input-group-btn 中删除自定义样式，从.form-control 中删除height: 33px;。通常，覆盖默认类不是一个好主意。
• 最后，您可以通过在#txtLogin 上应用margin-right 在两个输入之间添加所需的空间。您可以使用自定义 css 样式或使用 .mr-{} Spacing utility 类之一来执行此操作，例如.mr-2。

您可以在 Bootstrap 4 文档的 Multiple inputs 和 Button addons 部分找到此处使用的功能的文档。

.container { width:1170px }

.container-fluid>.navbar-collapse,.container-fluid>
.navbar-header,.container>
.navbar-collapse,.container>.navbar-header { 
    margin-right:0;
    margin-left:0
}

.col-sm-5 { width:41.66666667% }

/*.input-group {
    position:relative;
    display:table;
    border-collapse:separate
}*/

.form-control {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    /*height: 33px;*/
    border: 1px solid #EAEAEA;
    /*border-radius: 2px;*/
    transition: all 0.4s ease-in-out 0s;
}

/*.input-group-btn{
    position:relative;
    font-size:0;
    white-space:nowrap
}*/

<form action="login.asp" method="post" name="Form1">
    <div class="input-group">
        <input class="form-control mr-2" type="text" id="txtLogin" name="txtLogin" placeholder="Login" data-validation-required-message="Please enter your login ID." required="required"/>
        <input class="form-control" type="password" id="txtPass" name="txtPass" placeholder="Password" data-validation-required-message="Please enter your email address." required="required"/>
        <div class="input-group-append">
            <button class="btn btn-g btn-round" id="btnlogin" type="submit">Login</button>
        </div>
    </div>
</form>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

Answer 2

您可以在按钮前添加  以添加空格。这就是你想要做的吗？

编辑：我不知道您的 btn btn-g 或 btn-round css 类是什么，但如果您添加内联边距值（如在按钮样式标签中），它将覆盖您的 css 分类中的任何内容和给你空间

.container{width:1170px}

.container-fluid>.navbar-collapse,.container-fluid>
.navbar-header,.container>
.navbar-collapse,.container>.navbar-header { 
  margin-right:0;
  margin-left:0
}

.col-sm-5{width:41.66666667%}

.input-group {
position:relative;
display:table;
border-collapse:separate
}

.form-control {
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 11px;
height: 33px;
border: 1px solid #EAEAEA;
border-radius: 2px;
transition: all 0.4s ease-in-out 0s;
}

.input-group-btn{
 position:relative;
 font-size:0;
 white-space:nowrap
 }

<div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#custom-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="index.html">GLOW</a>

            <!--<div class="col-sm-5 pull-right hidden-lg hidden-md hidden-print hidden-sm hii" style="padding-top:10px">-->
            <div class="col-sm-5 pull-right hidden-md hidden-print hidden-sm hii" style="padding-top:10px">
                <form action="login.asp" method="post" name="Form1">
                    <div class="input-group">
                        <input class="form-control" type="text" id="txtLogin" name="txtLogin" placeholder="Login" data-validation-required-message="Please enter your login ID." required="required"/><span class="input-group-btn">
                        <input class="form-control" type="password" id="txtPass" name="txtPass" placeholder="Password" data-validation-required-message="Please enter your email address." required="required"/>
                    <button class="btn btn-g btn-round" id="btnlogin" type="submit" style="margin-left:10px">Login</button></span>
                    </div>

                </form>
            </div>

      </div>