Budem budovať web založený na bootstrap a ja sa snažímvytvoriť titul vnútri rámca s textom pripojeným v strede dolného okraja a stále reagovať. Malý text na malých zariadeniach môže ísť vo viacerých riadkoch, alebo dokonca ísť vnútri boxu.
Jediné, čo som mohol urobiť, je
.
A chcem to robiť 
.
Dúfam, že to niekto urobil a / alebo mi to mohol pomôcť.
Vopred ďakujem.
Jedným veľkým detailom je, že by mal byť úplne transparentný, aby mohol prejsť do pozadia.
A je to oveľa odlišnejší od poľa, pretože "legenda" je na dne.
odpovede:
1 pre odpoveď č. 1aktualizácia:
CSS:
.navbar-brand {
margin: 0;
color: #ffffff;
text-align: center;
position: relative;
display: inline-block;
border-top: 8px solid #ffffff;
padding: 5px 32px 0px 32px;
line-height: 1.08333333;
height: auto;
}
.navbar-brand:before {
position: absolute;
content: "";
left: -8px;
top: -8px;
width: 8px;
bottom: 12px;
background: #ffffff;
}
.navbar-brand:after {
position: absolute;
content: "";
right: -8px;
top: -8px;
width: 8px;
bottom: 12px;
background: #ffffff;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
color: #ffffff;
text-decoration: none;
}
.navbar-header + h3 {
margin-top: 61px;
}
.navbar-header {
text-align: center;
}
.small-lines:before {
position: absolute;
content: "";
left: -40px;
height: 8px;
bottom: 12px;
width: 8%;
background: #ffffff;
}
.small-lines:after {
position: absolute;
content: "";
right: -40px;
height: 8px;
bottom: 12px;
width: 8%;
background: #ffffff;
}
.small-lines1:before {
width: 38%;
background: #009fb6;
}
.small-lines1:after {
width: 38%;
background: #009fb6;
}
.navbar-brand a{
font-size: 48px;
}
.container{
margin-top: 150px;
}
small {
line-height: 1.2;
font-size: 24px;
letter-spacing: 4.8px;
display: block;
position: relative;
}
HTML:
<body style="background: black">
<header class="">
<div class="container text-center">
<div class="navbar-header">
<h1 class="navbar-brand ">
<a href="./">BIG TITLE ONE<br>
<small class="small-lines">Here comes small text</small>
</a>
</h1>
</div>
</div>
</header>
</body>