Question

我正在使用boostrap来创建表单。有三个主要部分，我希望每个部分都有自己的颜色。问题是，如果我不知道怎么做而不必将它们分成不同的形式。

目前，这与我的相似：

<div id="section-one" style="background-color:green">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <form role="form">
                    <h2>Section one</h2>
                    ...
                </form>
            </div>
        </div>
    </div>
</div>
<div id="section-two" style="background-color:black">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <form role="form">
                    <h2>Section two</h2>
                    ...
                </form>
            </div>
        </div>
    </div>
</div>
<div id="section-three" style="background-color:blue">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <form role="form">
                    <h2>Section three</h2>
                    ...
                </form>
            </div>
        </div>
    </div>
</div>

我尝试着色每个表单，但它没有跨越浏览器的宽度。任何建议将不胜感激。

Answer 1

我不确定你的问题是什么。但是您可以将所有html包装在一个表单中。如果您不想要保证金，可以添加

html, body {
margin: 0;
padding: 0;
}

改进代码：

<style>
   html, body {
   margin: 0;
   padding: 0;
   }
</style>
   <form>
   <div id="section-one" style="background-color:green">
       <div class="container">
           <div class="row">
               <div class="col-md-8 col-md-offset-2">
                    <h2>Section one</h2>
                    ...
            </div>
        </div>
    </div>
</div>
<div id="section-two" style="background-color:black">
    <div class="container">
        <div class="row">
                    <h2>Section two</h2>
                    ...
            </div>
        </div>
    </div>
</div>
<div id="section-three" style="background-color:blue">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                    <h2>Section three</h2>
                    ...
            </div>
        </div>
    </div>
</div>
</form>

Answer 2

Bootstrap的容器类自动带有宽度，这就是为什么它们不会跨越浏览器的宽度＆＃34;。如果boostrap自动添加它，你还需要使表单上的边距/填充无效

此处为Boostrap's container - 请查看＆＃34;网格选项＆＃34; section，row＆＃34; container width＆＃34;。
这里有助推器form-group class

由于你正在使用Bootstrap，它还带有＆＃34;重置＆＃34; CSS - see here。您无需将margin: 0; padding: 0;添加到body, html。

另外另一个注意事项 - row课程将使利润率下降。因此，无论何时使用这些，您都需要使用.col-XX-XX类，lg，md，sm或xs。原因是b / c，它们在那里有自动填充，因此使row类的负边距偏移无效。你的第二个＆＃34;部分＆＃34;在class="row" div

之后没有一个

form  {
  margin: 0;
  padding: 0;
}

form > div {
   margin: 0;
   width: 100%;
}

#section-one {
   background-color: red;
}

<form action="/something" method="post" name="blah-blah">
   <div id="section-one">
     <div class="container">  <-- bootstrap auto adds width to "container" class
        <div class="row">
           <div class="col-md-8....">
               <h2>.....</h2>
               <div class="form-group">  <-- read about bootstrap's "form-group" class
                      <input .......... />
               </div>
           </div>
        </div>
     </div>
  </div>
  <div id="section-two">
     <div class="container">
        .........
        .........
  <div class="form-group row">
      <button type="submit">Submit</button>
  </div>
</form>

Answer 3

您可以使用/*Label*/ label[for*='box']{ border: 1px solid #fff; padding:1em; margin:1em; display:inline-block; background: orange; color:#fff; font-family:sans-serif; cursor: pointer; } label[for*='box']:hover{ border: 1px solid #e2e2e2; background: red; }代替container-fluid以及简化HTML（您不必使用单个容器）以及简单地添加颜色来实现此目的到背景只是将它应用于具有ID /类的container本身，因为它不会在结构上改变任何东西。

请参阅代码段中的示例。

＆＃13;

row

＆＃13;

#section-one {
  background-color: red;
}
#section-two {
  background-color: lightblue;
}
#section-three {
  background-color: pink;
}
/*EXAMPLE FORM*/

#section-one-2 {
  background-color: lightblue;
  padding-top: 15px;
}
#section-two-2 {
  background-color: red;
  padding-top: 15px;
}
#section-three-2 {
  background-color: pink;
  padding-top: 15px;
}

＆＃13;

如何为长引导形式的不同部分着色

3 个答案: