面板標題中的自舉負邊距不起作用

Question

.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-->

Answer 1

在這裏，你去了一個解決方案https://jsfiddle.net/enmyngeh/

.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; 
 
    width: calc(100% + 30px); 
 
    
 
} 
 

 
.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'></span></a></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-->

的代碼更改

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

既然你有多餘的15pxpadding上panel-heading左&正確的，所以你需要添加缺少的空間input。 calc(100% + 30px)