隐藏在引导后输入后面滚动的文本 [英] Hide Text that is scrolled behind input in bootstrap

问题描述

在我的示例中，我有一个固定的输入 data-spy =affix，它向下移动 90px 由于父母< div class =containerstyle =margin-top：80px> 。

<所以唯一应该滚动的是文字。这实际上是有效的！

我的问题是在输入后面滚动的文本是可见的，我想隐藏它！

我试图在输入前添加一个白色框，但是我所有的尝试都没有真正成功！
所以我希望你能帮助我！谢谢

http://bootply.com/113734

解决方案

事实上，@ nico-o已经在这里给出了答案。

 < div style =background-color：white; padding机顶：80px; data-spy =affixdata-offset-top =1> 
< input class =form-controlid =searchtermname =tagsplaceholder =Inputtype =text> 
< / div> 
  

这样做，您将遇到与此处所述相同的问题： Bootstrap 3RC1 +侧面板+附加。

为了解决这个问题，请添加：

  $（document）.scroll （function（）{
 $（'。affix'）。width（$（'。container'）。width（））; 
}）; 
  

请参阅： http://bootply.com/113811

@ nico-o还提供了一个可滚动的文本容器，参见 http://getbootstrap.com/javascript/#scrollspy-examples 为例

In my example i have a fixed input data-spy="affix" that is shifted downwards by 90px because of the parent <div class="container" style="margin-top:80px">.

So the only thing that should scroll is the text. This actually works!

My problem is that the text that is scrolled behind the input is visible and i would like to hide it!

I tried to add a white box before the input but all my tries where not really successful! So i hope you can help me! Thanks

http://bootply.com/113734

解决方案

in fact @nico-o already gives the answer here. Wrap your input inside a div and apply the affix on this:

<div style="background-color:white;padding-top:80px;" data-spy="affix" data-offset-top="1">
<input class="form-control" id="searchterm" name="tags" placeholder="Input" type="text">  
</div>

Doing this you will have the same kind of problem as described here: Bootstrap 3RC1 + Side Panel + Affix.

To solve this add:

$(document).scroll(function(){
    $('.affix').width($('.container').width());
});

See: http://bootply.com/113811

@nico-o also suggest a scrollable Text-container, see http://getbootstrap.com/javascript/#scrollspy-examples for an example

这篇关于隐藏在引导后输入后面滚动的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！