我的div溢出虽然我应用溢出隐藏

时间:2018-04-24 10:46:19

标签: html css

请问我试图寻找这个div的解决方案,但没有找到,我不希望我的div溢出并创建一个滚动。我怎么能调整它不会再溢出。谢谢。我的代码在

之下

.contact-bar {
    /*overflow: hidden;*/
}
.contact-top {
    background-color: #1a1a1a;
    border: 1px solid transparent;
    padding: 5px;
}
.contact-top p {
    margin: 0 20px;
    color: white;
}
* {
    margin:0;
    padding:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row contact-bar">
    <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6 contact-top">
        <p><i class="fa fa-phone"></i><span> </span><i class="fa fa-whatsapp"></i>  +2347033501657</p>
    </div>
    <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6 contact-top">
        <p><i class="fa fa-envelope"></i> allamit@gmail.com</p>
    </div>
</div>

3 个答案:

答案 0 :(得分:0)

根据您的要求尝试将# userx @ COG148 in ~/Downloads/mlpy-3.5.0 [12:09:06] $ python3 setup.py install running install running build running build_py running build_ext building 'mlpy.gsl' extension gcc -Wno-unused-result -Wsign-compare -Wunreachable-code -DNDEBUG -g -fwrapv -O3 -Wall -Wstrict-prototypes -I/Users/userx/miniconda3/include -arch x86_64 -I/Users/userx/miniconda3/include -arch x86_64 -I/Users/userx/miniconda3/include/python3.6m -I/Users/userx/miniconda3/lib/python3.6/site-packages/numpy/core/include -I/Users/userx/miniconda3/include/python3.6m -c mlpy/gsl/gsl.c -o build/temp.macosx-10.7-x86_64-3.6/mlpy/gsl/gsl.o mlpy/gsl/gsl.c:223:10: fatal error: 'gsl/gsl_sf.h' file not found #include "gsl/gsl_sf.h" ^~~~~~~~~~~~~~ 1 error generated. error: command 'gcc' failed with exit status 1 包裹在gslrow

&#13;
&#13;
container
&#13;
container-fluid
&#13;
&#13;
&#13;

工作小提琴here

答案 1 :(得分:0)

删除行并使用容器。希望它有所帮助..

&#13;
&#13;
.contact-bar {
	/*overflow: hidden;*/
	
}
.contact-top {
	background-color: #1a1a1a;
	border: 1px solid transparent;
	padding: 5px;

}
.contact-top p {
	margin: 0 20px;
	color: white;

}
* {
	margin:0;
	padding:0;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

	<div class="container contact-bar">
		
		<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6 contact-top">
			<p><i class="fa fa-phone"></i><span> </span><i class="fa fa-whatsapp"></i>  +2347033501657</p>
		</div>
		<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6 contact-top">
			<p><i class="fa fa-envelope"></i> allamit@gmail.com</p>
		</div>
	</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

overflow:hidden;将hide应用于其子级。但在这种情况下,你可以将contact-bar类包裹起来。因此,您需要将overflow:hidden应用于包含contact-bar的{​​{1}}。顺便说一句,你引导程序应用body,这就是我的示例代码中存在差距的原因。

https://cr8code.co/editor.php?workid=e42b821765c82cdc32e457c79b638d35