Как исправить проблему выравнивания заголовка с остальными элементами формы начальной загрузки?

Я использую самозагрузки 3. Вот мой кодКак исправить проблему выравнивания заголовка с остальными элементами формы начальной загрузки?

.divisionify { 
 
    margin-bottom: 5px; 
 
    position: relative; 
 
    border-top: 2px solid gray; 
 
} 
 

 
.form-title { 
 
    position: relative; 
 
    color: #7cc0e1; 
 
    font-size: 20px; 
 
    text-align: left; 
 
    margin-top: 10px; 
 
    margin-bottom: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="col-xs-12 col-sm-10 col-sm-offset-1"> 
 
    <div class="form-title">Apply for Plan</div> 
 
    <div class="divisionify"></div> 
 

 
    <form class="form-horizontal"> 
 
     <div class="form-group"> 
 
     <label for="institution-type" class="control-label">Type of institution</label> 
 
     <div class=""> 
 
      <input type="email" class="form-control" id="institution-type" placeholder="Type of institution"> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="name" class="control-label">Name</label> 
 
     <div class=""> 
 
      <input type="text" class="form-control" id="name" placeholder="Name"> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <div class=""> 
 
      <button type="submit" class="btn btn-default">Apply</button> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

И он производит этот макет

Вы можете увидеть название 'Apply для плана' делает не совпадают с элементами управления формы с левой стороны.

это из-за этих параметров с помощью Bootstrap

margin-left: -15px; 
margin-right: -15px;

я могу исправить эту проблему, добавив их тоже в мой CSS класс .form-title и .divisionify

Однако есть лучший способ исправить выравнивание?

Это мой желаемый макет

источник

2017-02-21 Anthony Kong

Почему не просто переопределить стили Bootstrap с вашей собственной?

Добавьте это в ваш код:

.form-group { 
    margin-right: 0 !important; 
    margin-left: 0 !important; 
}

источник

2017-02-21 02:57:03

Спасибо за ответ. Я думаю, это сработает. Однако, как правило, это плохая идея использовать '~ important'? –

Люди любят говорить такие вещи, как: * никогда не использовать '! Important' *, * никогда не использовать встроенные стили *, * никогда не использовать таблицы для макета * и т. Д. Эти типы утверждений обычно упрощены и преувеличены. –

Я согласен, что '! Important' не должен использоваться в качестве замены для написания кода хорошего качества. Вы всегда должны использовать специфику и каскад, чтобы правильно применять свои правила. Но имейте в виду, что '! Important' находится в спецификации. Он существует по какой-то причине. Одной из веских причин использования '! Important' является переопределение кода, по которому у вас нет контроля. –

Дайте Перетяжка left и right в .form-title и .divisionify

.divisionify { 
    margin-left: -15px; 
    margin-right: -15px; 
} 
.form-title{ 
    margin-left: -15px; 
    margin-right: -15px; 
}

Check live

источник

2017-02-21 06:04:59

Я уже упоминал об этом в вопросе. Я спрашиваю, есть ли лучшая альтернатива. –

да! вы вызываете класс столбцов в 'form-group'. как 'form-group col-md-12'. –

См. Эту ссылку http://codepen.io/sifulislam/pen/pRMwWa –

Проблема с использованием !important вещь что все станет для вас важным. Я бы использовал пример от родителей к ребенку:

#father.child{margin-right: 0px; margin-left: 0px;}.

С этим вы будете управлять без использования !important. Подумайте, что с помощью !important вы собираетесь изменить реакцию Bootstrap по умолчанию на всю страницу для этого случая.

DOC: What are the implications of using "!important" in CSS?

источник

2017-02-21 08:28:17 JMF

Вы можете добавить дополнительный идентификатор для элементов и стиль их по вашему желанию. Таким образом, вы можете избежать !important. Это то, что мне нравится.

Edited фрагмент кода

.divisionify { 
 
    margin-bottom: 5px; 
 
    position: relative; 
 
    border-top: 2px solid gray; 
 
    
 
} 
 

 
.form-title { 
 
    position: relative; 
 
    color: #7cc0e1; 
 
    font-size: 20px; 
 
    text-align: left; 
 
    margin-top: 10px; 
 
    margin-bottom: 5px; 
 
} 
 
#applyPlan { 
 
margin-left: -15px; 
 
margin-right: -15px; 
 
} 
 
#division { 
 
margin-left: -15px; 
 
margin-right: -15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="col-xs-12 col-sm-10 col-sm-offset-1"> 
 
    <div id= "applyPlan" class="form-title">Apply for Plan</div> 
 
    <div id="division" class="divisionify"></div> 
 

 
    <form class="form-horizontal"> 
 
     <div class="form-group"> 
 
     <label for="institution-type" class="control-label">Type of institution</label> 
 
     <div class=""> 
 
      <input type="email" class="form-control" id="institution-type" placeholder="Type of institution"> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="name" class="control-label">Name</label> 
 
     <div class=""> 
 
      <input type="text" class="form-control" id="name" placeholder="Name"> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <div class=""> 
 
      <button type="submit" class="btn btn-default">Apply</button> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

источник

2017-02-21 08:33:33 neophyte

Как исправить проблему выравнивания заголовка с остальными элементами формы начальной загрузки?

ответ

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