Zan*_*cat 5 css twitter-bootstrap
我正在使用Bootstrap
,我想在一个看起来像<input-group-addon>
. 具体来说,全高且位于最右侧。
我试过了,height: 100%
但按钮样式超高。
这是我的代码的一部分:https : //plnkr.co/edit/lK8vt0wT1xDesuOZW8vU?p=preview
尝试绝对定位您的按钮:
.my-heading {
position: relative;
}
.btn.my-btn {
position:absolute;
right: 0;
top: 0;
height: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
Run Code Online (Sandbox Code Playgroud)
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading my-heading">Assist Panel<button class="my-btn btn"><i class="fa fa-chevron-left"></i></button></div>
<div class="panel-body"></div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)