Дело кажется идиотски простым, но я не могу разобраться с настройкой элементов.
Что у меня есть:
Или же:
Что мне нужно:
Код: JSFiddle
<div class="container">
<div class="page-header">
<h2>Header</h2>
<div class="btn-group <!-- pull-right -->">
<a class="btn btn-success" href="/Scope/New">Create</a>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pre-scrollable" role="menu">
<li class="dropdown-header">Create as copy: </li>
<li><a href="/Scope/New/1">Test 1</a></li>
<li><a href="/Scope/New/2">Test 45</a></li>
<li><a href="/Scope/New/3">Lorem ipsum</a></li>
</ul>
</div>
</div>
</div>
</div>
0
2 Май 2019 в 16:13
3 ответа
Лучший ответ
Добавьте clearfix в page-header, а также добавьте display: inline; в h2.
Это исправит вашу проблему. (в настоящее время h2 добавлен встроенный, вы можете поместить его в свой файл CSS)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="page-header clearfix
">
<h2 style="display: inline;">Header</h2>
<div class="btn-group <!-- pull-right -->">
<a class="btn btn-success" href="/Scope/New">Create</a>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pre-scrollable" role="menu">
<li class="dropdown-header">Create as copy: </li>
<li><a href="/Scope/New/1">Test 1</a></li>
<li><a href="/Scope/New/2">Test 45</a></li>
<li><a href="/Scope/New/3">Lorem ipsum</a></li>
</ul>
</div>
</div>
</div>
</div>
1
2 Май 2019 в 13:20
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
justify-content: space-between;
} <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="page-header">
<h2>Header</h2>
<div class="btn-group">
<a class="btn btn-success" href="/Scope/New">Create</a>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pre-scrollable" role="menu">
<li class="dropdown-header">Create as copy: </li>
<li><a href="/Scope/New/1">Test 1</a></li>
<li><a href="/Scope/New/2">Test 45</a></li>
<li><a href="/Scope/New/3">Lorem ipsum</a></li>
</ul>
</div>
</div>
</div>
</div>Вот и все, вы можете использовать flex.
2
2 Май 2019 в 14:22
Добавить clearfix в page-header
<div class="page-header clearfix">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="page-header clearfix
">
<h2>Header</h2>
<div class="btn-group <!-- pull-right -->">
<a class="btn btn-success" href="/Scope/New">Create</a>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pre-scrollable" role="menu">
<li class="dropdown-header">Create as copy: </li>
<li><a href="/Scope/New/1">Test 1</a></li>
<li><a href="/Scope/New/2">Test 45</a></li>
<li><a href="/Scope/New/3">Lorem ipsum</a></li>
</ul>
</div>
</div>
</div>
</div>
1
2 Май 2019 в 13:16
En Español