Question

一个两部分的问题：我用一些元素得到了不必要的填充，特别是导航和用实心边框勾勒出的标题内容，它阻止我在视觉上对齐事物。我将边距和填充重置为0但这似乎确实解决了它。

我似乎无法在表单输入中添加填充。我已经尝试了所有明显的东西。

关于如何摆脱这些的任何想法？

以下是基本标题形状：

 <section class="hero">
    <div class="container">
        <!--Navbar-->
        <nav class="navbar">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="navbar-collapse" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav-custom">
                        <li><a href="#"><img src="public/logo.jpg"></a></li>
                        <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    </div>
                </div>
            </nav>
        <!--/Navbar-->

        <!--header content-->
        <div class="col-sm-6" id="h-content">
            <h1><span class="highlight">TRUSTED</span><br>BY EVERY1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cumque, dignissimos enim eveniet facilis hic incidunt laboriosam modi nihil officia pariatur</p>
        </div>

        <!--form-->
        <div class="col-sm-5 col-sm-offset-1" id="quote-form">
            <h2>Request a Quote</h2>
            <form action="/" method="post">
                <div class="form-group">
                <input type="text" class="form-control" placeholder="Full Name">
                <input type="email" class="form-control"  placeholder="Email Adress">
                <input type="number" class="form-control" placeholder="Phone Number">
                <input type="text" class="form-control"  placeholder="Country">
                <input type="checkbox"> I accept the terms and conditions<br>
                <button type="submit" class="btn highlight2 form-control">Submit</button>
                </div>

            </form>
        </div>
    </div>
</section>

和sass：

    $primary : rgb( 93, 187, 193);
$secondary : rgb( 19, 14, 39);

//Elements

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  * {
    margin: 0;
    padding: 0;
  }
}

h1 ,h2 ,h3, h4, h5, h6, p{
  color: white;
}

.navbar{
  padding-top: 30px;
  border: 1px solid orange;

}

//classes and IDs


#h-content{
  z-index: 2;
  margin-top: 150px;
  font-size: xx-large;

  border: 1px solid orange;

  h1{
    border: 1px solid orange;

  }
  p{
    font-size: large;
    border: 1px solid orange;

  }
}

input {
  padding-top: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.hero{
  width: 100%;
  height: 800px;
  background: black;
  background-size: cover;
  background-repeat: no-repeat;
}

.highlight{
  color: $primary;
}

.highlight2{
  color: $secondary;
}

.nav-custom{
  display: flex;
  text-decoration: none;
  width: 100%;
  list-style: none;
  li{
    border: 1px solid red;
    vertical-align: middle;
    padding:20px;
  }
  li:first-child{
    flex-grow: 1;
  }
  a{
    vertical-align: middle;
  }
}

#quote-form{
  background-color: $primary;
  margin-top: 150px;
}

Answer 1

试试这个：

检查演示here

HTML：

<section class="hero">
  <div class="container">
    <!--Navbar-->
    <nav class="navbar">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="navbar-collapse" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
      </div>

      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav-custom">
          <li>
            <a href="#"><img src="public/logo.jpg"></a>
          </li>
          <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>

    </nav>
    <!--/Navbar-->

    <!--header content-->
    <div class="col-sm-6" id="h-content">
      <h1><span class="highlight">TRUSTED</span><br>BY EVERY1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cumque, dignissimos enim eveniet facilis hic incidunt laboriosam modi nihil officia pariatur</p>
    </div>

    <!--form-->
    <div class="col-sm-5 col-sm-offset-1" id="quote-form">
      <h2>Request a Quote</h2>
      <form action="/" method="post">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Full Name">
        </div>
        <div class="form-group">
          <input type="email" class="form-control" placeholder="Email Adress">
        </div>
        <div class="form-group">
          <input type="number" class="form-control" placeholder="Phone Number">
        </div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Country">
        </div>
        <div class="form-group">
          <input type="checkbox"> I accept the terms and conditions
        </div>
        <div class="form-group">
          <button type="submit" class="btn highlight2 form-control">Submit</button>

        </div>

      </form>
    </div>
  </div>
</section>

SCSS：

 $primary: rgb( 93, 187, 193);
 $secondary: rgb( 19, 14, 39);
 //Elements
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   * {
     margin: 0;
     padding: 0;
   }
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p {
   color: white;
 }

 .navbar {
   padding-top: 0;
   border: 1px solid orange;
   margin-top: 20px;
 }

 //classes and IDs
 #h-content {
   z-index: 2;
   margin-top: 150px;
   font-size: xx-large;
   border: 1px solid orange;
   h1 {
     border: 1px solid orange;
   }
   p {
     font-size: large;
     border: 1px solid orange;
   }
 }

 input {
   padding-top: 15px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

 .hero {
   width: 100%;
   height: 800px;
   background: black;
   background-size: cover;
   background-repeat: no-repeat;
 }

 .highlight {
   color: $primary;
 }

 .highlight2 {
   color: $secondary;
 }

 .nav-custom {
   display: flex;
   text-decoration: none;
   width: 100%;
   list-style: none;
   margin-bottom: 0;
   padding: 15px 0;
   li {
     border: 1px solid red;
     vertical-align: middle;
     padding: 20px;
   }
   li:first-child {
     flex-grow: 1;
   }
   a {
     vertical-align: middle;
   }
 }

 #quote-form {
   background-color: $primary;
   margin-top: 150px;
 }

请记住：不要嵌套容器。

详细了解bootstrap网格结构here

尽管重置，元素内部的额外填充

1 个答案: