2016-07-27 25 views
2

请看例子 http://v4-alpha.getbootstrap.com/components/forms/#inline-forms什么是给要素之间的保证金这种形式

我看不出是什么原因造成的form-group和按键之间的差距,也是form-group秒之间。当我启用flexbox使用引导程序4时,我所有的元素(输入和按钮)都会在它们之间没有任何边距的情况下崩溃。

如何查看导致突出显示的form-group和旁边的按钮?我无法通过铬检查员找到它。

谢谢。

enter image description here

+0

我们需要的不仅仅是图像,以帮助更多的,我敢肯定你知道如何提出正确的问题:),所以请张贴一个最小的工作代码片段,重现问题 – LGSon

+0

抱歉错误的措辞。我的问题是在上面的链接(bs4文档),什么是造成的空间,我怎么能通过铬检查器看到它。 – bsr

+0

对不起,我的回答认为你是在询问名称输入框和电子邮件标签之间的空白区域,但当谈到电子邮件文本框和按钮之间的空间时,答案是一样的。从html中删除空格,该按钮将位于电子邮件文本框旁边。 –

回答

2

这是怎么样的一个棘手的事情,但它有这意味着它们是内联格式化上下文的一部分,该两个div被设置为display:inline-block的事实做了,每个div都几乎表现为如果它是一个句子中的单词。我们希望单词之间的空格可以呈现,因此html非常巧妙地暗示了html中的空格应该被渲染为空格。在Chrome检查器中,它对元素树进行格式化的方式隐藏了这一点,但如果您在Chrome检查器中编辑父元素上的html并删除空间,则可以重新创建您在我的codepen示例中看到的内容。

下面是一个代码笔,以证明:http://codepen.io/MarkAtRamp51/pen/XKYNpZ

通知二者之间的差:从HTML显示的两个表单组之间的空格

摘录

<input type="text" class="form-control" id="exampleInputName2" 
placeholder="Jane Doe"> </div> 
<div class="form-group"> 
    <label for="exampleInputEmail2">Email</label> 

<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> 
    </div><div class="form-group"> 
    <label for="exampleInputEmail2">Email</label> 

注意在第二个ex充足的两个DIV彼此相邻。

你可以找到关于这个位置的详细信息: https://css-tricks.com/fighting-the-space-between-inline-block-elements/https://www.w3.org/TR/CSS2/visuren.html

+0

您可以使用.btn删除按钮和文本框之间的空白。margin:-4px; }代码笔示例中的CSS。 – Gary

+0

您也可以这样做来删除名称文本框和电子邮件标签之间的空格。 –

+1

是.form-control {margin:4px; }将删除所有的空间 – Gary

相关问题