Question

我正在使用bootstrap 3.这是我的代码

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

它会产生这种布局

您可以看到标题＆＃39;申请计划＆＃39;与左侧的表格控件不对齐。

这是因为Bootstrap的这些设置

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

我可以通过将它们添加到我的css类.form-title和.divisionify

来解决此问题

然而，是否有更好的方法来修复路线？

这是我想要的布局

Answer 1

为什么不用自己的覆盖Bootstrap样式？

将此添加到您的代码中：

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

Answer 2

提供left和right的{{1}}和.form-title以及.divisionify

的填充

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

Check live

Answer 3

使用!important的问题是，一切都将对您很重要。我会使用父母对孩子的电话示例：

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

有了这个，你将在不使用!important的情况下执政。认为使用!important，您将要将Bootstrap的默认响应更改为此案例的整个页面。

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

Answer 4

您可以为元素添加其他ID，并根据您的意愿设置样式。通过这种方式，您可以避免!important。这是我喜欢的方式。

已编辑的代码段

＆＃13;

.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;
 }

＆＃13;

<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>

＆＃13;

如何使用其他引导程序窗体控件修复标头的对齐问题？

4 个答案: