Bootstrap 3 - Группа ввода внутри заголовка страницы

Я пытаюсь переместить группу ввода внутри своего заголовка страницы. Когда я пытаюсь использовать строку со столбцами, HR не работает полностью, что меня беспокоит.Bootstrap 3 - Группа ввода внутри заголовка страницы

Это то, что я пытаюсь достичь:

<div class="row"> 
    <div class="col-md-8"> 
     <div class="page-header"> 
     <h3 class="text-primary">EMP <small>My Dashboards</small></h3> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="input-group"> 
     <span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i>&nbsp;&nbsp;Search</span> 
     <input type="text" class="form-control" placeholder="Search Results..." id="search" name="search"> 
     </div> 
    </div> 
</div>

Вот скрипку: https://jsfiddle.net/eo75juzL/

Я просто пытаюсь переместить поиск входной группы, чтобы быть выровнен по правому краю с H3 и поддерживать линию до конца.

источник

2017-02-14 SBB

Вы можете видеть в своей скрипке, что она выровнена по правому краю. Поэтому проблема должна быть в другом месте. – Sebastian

@Sebastian. Я также вижу, что нижняя граница заголовка страницы отключается из-за того, что она охватывает только 'col-8', что я пытаюсь исправить. Я понимаю, что определение его ширины будет содержать его, но я не знаю, как еще сохранить его в одной строке без строки/col. – SBB

Нравится это? https://jsfiddle.net/eo75juzL/5/ – Sebastian

Я обновил ваш fiddle.

Горизонтальная линия является частью page-header, поэтому я переместил ваши столбцы в этот div. В настоящее время применяется нормальное поведение бутстрапа, и поле поиска правильно выровнено.

источник

2017-02-14 17:23:12 Brino

Чтобы разместить окно поиска внутри заголовка, вы должны добавить этот css.

.dash_input { 
margin-top: -30px; 
}

.dashboard { 
 
    margin-top: -40px; 
 
} 
 
.dash_input { 
 
    margin-top: -30px; 
 
}

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      </head> 
 
      <body> 
 
      <div class="row"> 
 
      <div class="page-header"> 
 
     <div class=" dashboard col-md-8 col-lg-8 col-sm-8 col-xs-8 "> 
 
    
 
     <h3 class="text-primary">EMP <small>My Dashboards</small></h3> 
 
    </div> 
 
     <div class="dash_input col-md-4 col-lg-4 col-sm-4 col-xs-4 pull-right"> 
 
     <div class="input-group"> 
 
      <span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i>&nbsp;&nbsp;Search</span> 
 
      <input type="text" class="form-control" placeholder="Search Results..." id="search" name="search"> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    </div> 
 
      </body> 
 
      </html>

Вы были некоторые проблемы с сНом наценкой. попытался это исправить. взгляните на приведенный выше фрагмент. Также я предлагаю вам использовать class="navbar". в этом случае у вас будет больше гибкости.

источник

2017-02-14 16:51:50 neophyte

Bootstrap 3 - Группа ввода внутри заголовка страницы

ответ

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