Bootstrap HTML5 Заголовок с границей и небольшим текстом, например, с полем, но не с полем/легендой

Я создаю веб-сайт, основанный на бутстрапе, и я пытаюсь сделать заголовок внутри рамки с текстом, прикрепленным в середине нижней границы и все еще быть отзывчивым. Небольшой текст на небольших устройствах может занимать несколько строк или даже идти внутрь коробки.Bootstrap HTML5 Заголовок с границей и небольшим текстом, например, с полем, но не с полем/легендой

Все, что я мог сделать, это
.
И я хочу сделать это как .

Я надеюсь, что кто-то уже сделал это и/или мог помочь мне это сделать.

Заранее спасибо.

Одна большая деталь должна быть полностью прозрачной, чтобы она могла перемещаться по фоновой картине.

И это сильно отличается от fieldset, потому что «легенда» находится внизу.

источник

2016-06-19 Luka

Можете ли вы предоставить нам код, который вы Trie d (скрипка была бы замечательной) –

здесь [https://jsfiddle.net/nwfpkLkc/2/](https://jsfiddle.net/nwfpkLkc/2/), я пробовал с классами navbar, но не сделал этого , – Luka

Update:

See fiddle

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>

источник

2016-06-19 16:16:48

не то, что ищет ОП. – dippas

Я знал, как это сделать, но мне нужно, чтобы он был прозрачным, без фона. Таким образом, он может перейти на задний план. – Luka

Будете ли вы использовать это на сложной поверхности или просто на обычном цвете? Если это так, вы можете просто сделать оба цвета одинаковыми с фоном. Но я полагаю, вы будете использовать его в сложных фоновых сценариях. Так. Вместо этого вы можете использовать svg. –

Bootstrap HTML5 Заголовок с границей и небольшим текстом, например, с полем, но не с полем/легендой

ответ

Смежные вопросы