0
.panel-heading
在引导中有左右15px的填充。我希望输入字段在.panel-heading
内部100%扩展。我尝试了负利润率:面板标题中的自举负边距不起作用
input.form-control {
text-align:center;
border: 5px solid #ccc;
height: 40px;
margin-left: -15px;
margin-right: -15px;
}
但是只有左侧工作。我怎样才能获得正确的工作方式?
.col-xs-12 {
\t padding-left: 0;
\t padding-right: 0;
}
.panel-heading {
\t position: -webkit-sticky;
\t position: -moz-sticky;
\t position: -ms-sticky;
\t position: -o-sticky;
\t position: sticky;
\t width: 100%;
\t z-index: 99999;
\t top: 0;
}
.glyphicon-arrow-left {
\t margin-top: 5px;
}
.panel-heading h1 {
\t padding-bottom: 0.65em;
\t color: #3399ff;
\t font-weight: bold;
}
.panel-body {
\t padding: 0;
}
input.form-control {
text-align:center;
border: 5px solid #ccc;
height: 40px;
margin-left: -15px;
margin-right: -15px;
}
.users {
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
}
.users li {
\t border-bottom: 2px solid #eee;
\t color: #000;
}
.users li .username {
\t margin-left: 10px;
}
.users li:last-child {
\t border-bottom: none;
}
.users a {
\t display: block;
\t height: 45px;
\t padding: 15px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
\t <div class='row'>
\t \t <div class='col-sm-6 col-xs-12 col-centered'>
\t \t \t <div class='panel panel-default'>
\t \t \t \t <div class='panel-heading sticky'>
\t \t \t \t \t <div class='back pull-left'><a href='chats.php'><span class='glyphicon glyphicon-arrow-left'></a></span></div>
\t \t \t \t \t <h1 class='panel-title text-center'>New Chat</h1>
\t \t \t \t \t <input class='form-control' id='searchUser' type='text' placeholder='Search'>
\t \t \t \t </div>
\t \t \t \t <div class='panel-body'>
\t \t \t \t \t <ul class='users'>
\t \t \t \t \t \t <li class='user text-center'>
\t \t \t \t \t \t \t <a href='#'><span class='glyphicon glyphicon-user'></span><strong class='username'>John Appleseed</strong></a>
\t \t \t \t \t \t </li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div><!--end column-->
\t </div><!--end row 1-->
</div><!--end container-->
谢谢。你知道我的负利润率为什么不起作用吗? –
@RobertRocha ..'margin-left'正在工作,但问题在于父div。父容器在**左**和**右**处具有'15px'的'padding'。所以,即使儿童宽度为100%也会排除填充15px。这就是为什么我加了30px。 – Shiladitya