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

Question

.panel-heading 在 Bootstrap 中左右填充 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 {
	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-->

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);
}

由于在 panel-heading 的左侧和右侧有额外的 15px padding，因此您需要将缺少的空间添加到 输入。计算(100% + 30px)