如何解决标题与引导表单控件其余部分的对齐问题？

我使用的引导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>

而且它产生的这种布局

你可以看到标题 '申请计划' 做不与左侧的表单控件对齐。

这是因为通过引导这些设置

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

我可以加入他们太给我的CSS类.form-title和.divisionify

但是解决这个问题，有没有更好的办法修复对齐？

这是我想要的布局

来源

2017-02-21 Anthony Kong

为什么不重写引导的风格与自己的？

添加到您的代码：

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

来源

2017-02-21 02:57:03

感谢您的回答。我认为它会工作。但是，使用'〜important'通常不是一个好主意吗？ –

人们喜欢这样说：*永远不要使用'！important' *，*不要使用内联样式*，*从不使用表格来布局*等等。这些类型的语句通常是简单和夸大的。 –

我同意'！important'不应该被用作编写高质量代码的替代品。您应该始终使用特异性和级联来正确应用您的规则。但请记住，“重要”在规范中。它存在的原因。使用'！important'的一个很好的理由是覆盖你无法控制的代码。 –

给了left，并使用!important事情是.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 –

问题的right的填充一切都将最终对你很重要。我会使用父母对孩子的呼叫示例：

#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

可以附加ID添加到要素，并根据您的愿望他们的风格。这样可以避免!important。这是我首选的方式。

编辑的代码片段

.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

如何解决标题与引导表单控件其余部分的对齐问题？

回答

相关问题