Question

我无法将文本框和按钮分隔为空格，但在一行中，是否有人可以向我解释实际上的跨度？

<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

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

编辑：我不知道你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>

Answer 2

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

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

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

＆＃13;

.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
}*/

＆＃13;

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

＆＃13;

如何将输入字段与空格分开？

2 个答案: