面板标题中的Bootstrap负边距不起作用

Question

.panel-heading在bootstrap中左右填充15px的填充。我希望输入字段在input.form-control { text-align:center; border: 5px solid #ccc; height: 40px; margin-left: -15px; margin-right: -15px; } 内扩展100％。我尝试了负余量：

.col-xs-12 {
	padding-left: 0;
	padding-right: 0;
}

.panel-heading {
	position: -webkit-sticky;
  	position: -moz-sticky;
  	position: -ms-sticky;
  	position: -o-sticky;
  	position: sticky;
	width: 100%;
	z-index: 99999;
	top: 0;
}

.glyphicon-arrow-left {
	margin-top: 5px;
}

.panel-heading h1 {
	padding-bottom: 0.65em;
	color: #3399ff;
	font-weight: bold;
}

.panel-body {
	padding: 0;
}

input.form-control {
   text-align:center;
   border: 5px solid #ccc;
   height: 40px;
   margin-left: -15px;
   margin-right: -15px;
}

.users {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.users li {
	border-bottom: 2px solid #eee;
	color: #000;
}

.users li .username {
	margin-left: 10px;
}

.users li:last-child {
	border-bottom: none;
}

.users a {
	display: block;
	height: 45px;
	padding: 15px 0;
}

但只有左侧正在工作。我怎样才能让合适的一面工作呢？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
	<div class='row'>
		<div class='col-sm-6 col-xs-12 col-centered'>
			<div class='panel panel-default'>
				<div class='panel-heading sticky'>
					<div class='back pull-left'><a href='chats.php'><span class='glyphicon glyphicon-arrow-left'></a></span></div>
					<h1 class='panel-title text-center'>New Chat</h1>
					<input class='form-control' id='searchUser' type='text' placeholder='Search'>
				</div>
				<div class='panel-body'>
					<ul class='users'>
						<li class='user text-center'>
							<a href='#'><span class='glyphicon glyphicon-user'></span><strong class='username'>John Appleseed</strong></a>
						</li>
					</ul>
				</div>
			</div>
		</div><!--end column-->
	</div><!--end row 1-->
</div><!--end container-->

* {
    box-sizing: border-box;
}

.after {
    display: inline-block;
    max-width: 200px;
}

.after img {
    width: 100%;
}

.after .content {
    background-color: #C0D8D8;
    text-align: center;
    display: inline-block;
}

Answer 1

您可以使用解决方案https://jsfiddle.net/enmyngeh/

.col-xs-12 {
	padding-left: 0;
	padding-right: 0;
}

.panel-heading {
	position: -webkit-sticky;
  	position: -moz-sticky;
  	position: -ms-sticky;
  	position: -o-sticky;
  	position: sticky;
	width: 100%;
	z-index: 99999;
	top: 0;
}

.glyphicon-arrow-left {
	margin-top: 5px;
}

.panel-heading h1 {
	padding-bottom: 0.65em;
	color: #3399ff;
	font-weight: bold;
}

.panel-body {
	padding: 0;
}

input.form-control {
   text-align:center;
   border: 5px solid #ccc;
   height: 40px;
   margin-left: -15px;
   width: calc(100% + 30px);
   
}

.users {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.users li {
	border-bottom: 2px solid #eee;
	color: #000;
}

.users li .username {
	margin-left: 10px;
}

.users li:last-child {
	border-bottom: none;
}

.users a {
	display: block;
	height: 45px;
	padding: 15px 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
	<div class='row'>
		<div class='col-sm-6 col-xs-12 col-centered'>
			<div class='panel panel-default'>
				<div class='panel-heading sticky'>
					<div class='back pull-left'><a href='chats.php'><span class='glyphicon glyphicon-arrow-left'></span></a></div>
					<h1 class='panel-title text-center'>New Chat</h1>
					<input class='form-control' id='searchUser' type='text' placeholder='Search'>
				</div>
				<div class='panel-body'>
					<ul class='users'>
						<li class='user text-center'>
							<a href='#'><span class='glyphicon glyphicon-user'></span><strong class='username'>John Appleseed</strong></a>
						</li>
					</ul>
				</div>
			</div>
		</div><!--end column-->
	</div><!--end row 1-->
</div><!--end container-->

代码更改

input.form-control {
   text-align:center;
   border: 5px solid #ccc;
   height: 40px;
   margin-left: -15px;
  width: calc(100% + 30px);
}

由于左边有额外的15px padding，因此panel-heading的权利，因此您需要将该缺失的空间添加到input。 calc(100% + 30px)