Слетает иконка (bootstrap)

303
22 августа 2018, 05:40

Все иконки стоят на своём месте. А первая иконка слетает и заголовок. Почему так происходит?

* { 
  border-radius: 0 !important; 
} 
 
.bg-orange { 
  background: #f4a442 !important; 
} 
.sizep { 
	width:280; 
    height: 60px; 
} 
 
.data { 
	position:relative; 
	width:196px; 
	height:60px; 
} 
.tur { 
    position:relative; 
	width:280px; 
	height:60px; 
} 
.btn { 
	width:138px; 
	height:60px 
} 
.formInput > label { 
    position: absolute; 
    left: 42px; 
    top: 12px; 
    z-index: 2; 
    text-transform: uppercase; 
    font-size: 11px; 
    line-height: 1.09; 
    color: #9b9b9b; 
    font-family: OpenSansSemiBold, sans-serif; 
} 
.formControl .formInputPlace { 
    padding-left: 50px; 
} 
.formInputPlace > * { 
    display: inline-block; 
    vertical-align: top; 
	margin-left:40px; 
} 
.formInput>.far { 
    z-index: auto; 
    top: 21px; 
    left: 14px; 
    line-height: 18px; 
    height: 20px; 
    width: 20px; 
    text-align: center; 
    font-size: 23px; 
    color: #059bce; 
    transition: top .3s; 
    -moz-transition: top .3s; 
    -webkit-transition: top .3s; 
    -o-transition: top .3s; 
} 
.formInput .far { 
    color: #c8ced1; 
    z-index: 8; 
    position: absolute; 
    left: 10px; 
    font-style: normal; 
} 
.formInputPlace p { 
	margin-left:30px; 
	margin-top:18px; 
    font-size: 17px; 
    transition: margin .3s; 
    line-height: inherit; 
    color: #333 !important; 
    font-family: "OpenSansRegular"; 
    transition: font-size .3s; 
    -moz-transition: font-size .3s; 
    -webkit-transition: font-size .3s; 
    -o-transition: font-size .3s; 
} 
.search  { 
		width:270px; 
    height: 60px; 
} 
	
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> 
 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> 
 
<!-- (Optional) Latest compiled and minified JavaScript translation files --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script> 
 
 <link rel="stylesheet" type="text/css" href="struct.css"> 
 
<div class="container py-3"> 
 
  <ul class="nav nav-tabs border-0"> 
    <li class="nav-item"> 
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Город вылета: <span class="font-weight-bold text-primary"></span></a> 
    </li> 
 
    <li class="nav-item bg-orange"> 
      <a class="nav-link text-white bg-orange font-weight-bold" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Горячие туры <span class="badge badge-pill text-danger badge-light">-50%</span></a> 
    </li> 
  </ul> 
 
  <div class="tab-content "id="myTabContent"> 
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> 
 
      <form> 
        <div class="form-row"> 
		  <div class="form-control border-right-0 search"> 
		  <div class="formInput"> 
		  <label> Дата вылета  </label> 
		  <i class="far fa-calendar-alt"></i> 
		  <div class="formInputPlace"> 
                    <p class="withoutKids">С 13.07.2018</p> 
                    <span style="display: none;"></span> 
                </div> 
			 
          </div> 
		  </div> 
		  <div class="form-control border-right-0 data"> 
		  <div class="formInput"> 
		  <label> Дата вылета  </label> 
		  <i class="far fa-calendar-alt"></i> 
		  <div class="formInputPlace"> 
                    <p class="withoutKids">С 13.07.2018</p> 
                    <span style="display: none;"></span> 
                </div> 
			 
          </div> 
		  </div> 
		  <div class="form-control border-right-0 data"> 
		  <div class="formInput"> 
		  <label> Кол-во ночей </label> 
		  <i class="far fa-moon"></i> 
		  <div class="formInputPlace"> 
                    <p class="withoutKids">На 7-8 ночей</p> 
                    <span style="display: none;"></span> 
                </div> 
			 
          </div> 
		  </div> 
		  <div class="form-control border-right-0 tur"> 
		  <div class="formInput"> 
		  <label> Туристы </label> 
		  <i class="far fa-moon"></i> 
		  <div class="formInputPlace"> 
                    <p class="withoutKids">2 взрослых</p> 
                    <span style="display: none;"></span> 
                </div> 
			 
          </div> 
		  </div> 
            <button type="submit" class="btn bg-orange font-weight-bold text-white">Искать</button> 
        </div> 
      </form> 
 
    </div> 
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> 
      Тут ещё что-то 
    </div> 
  </div> 
 
</div>

Answer 1

По умолчанию .form-control - position: static;

Необходимо добавить к .form-control - position: relative;

READ ALSO
Не работает запрос на авторизацию

Не работает запрос на авторизацию

Нашел ресурс для тестирования https://reqresin/ Не получается сделать POST (Login_Successful)

217
Как сделать перенос текста в listbox

Как сделать перенос текста в listbox

Как сделать перенос текста в listbox?

264
Преобразование массива в DataTable

Преобразование массива в DataTable

Имеется массив следующего типа:

205
проверка наличия header в ответе сервера

проверка наличия header в ответе сервера

Разрабатываю приложение xamarin, возникла необходимость при любых http-запросах просматривать headerы ответа и сохранять определенный header, если...

224