按钮填充不起作用

时间：2018-02-01 08:50:31

标签： html css

我对html css很陌生，并希望能够获得有关如何构建表单的帮助。目前整个表单已完成，但我无法使用css进行编辑。主要的问题是按钮太靠近文本栏了，但我不能为它添加一个填充看起来更好（按钮代码几乎就在最后）。我尝试添加一个按钮容器css样式与填充，但这不起作用。

我也尝试过每行只有一个对象而不是＆＃34; col-sm-12＆＃34;所以它只占用了一半的可用空间但却无法使其工作。我想拥有＆＃34; Kategori＆＃34;输入字段为col-sm-6，然后下一行输入字段位于下一行。

非常感谢任何帮助。

html：

＆＃13;
＆＃13; 
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container-button {
  margin-top: auto;
  padding-top: 15px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<section class="text-center ">
  <div class="container">
    <div class="row">
      <div class="col-sm-10 col-md-7">

        <!-- <form class="text-left form-email" data-success="Thanks for your enquiry, we'll be in touch shortly." data-error="Please fill in all fields correctly." data-recaptcha-sitekey="6LewhCIUAAAAACSwFvBDhgtTbw6EnW6e9dip8o2u" data-recaptcha-theme="light"> -->
        <div class="col-sm-6">
          <label>Eventets namn:</label>
          <input type="text" name="Name" class="validate-required" />
        </div>
        <div class="col-sm-6">
          <label>Arrangeras av:</label>
          <input type="email" name="email" class="validate-required validate-email" />
        </div>
        <div class="col-sm-4">
          <label>Datum och tid</label>
          <input type="text" name="date-check-in" class="datepicker datepicker--fluid" placeholder="Startdatum" />
        </div>
        <div class="col-sm-2">
          <label></label>
          <div class="input-select input-select--borderless">
            <select name="guests">
              <option value="1">1</option>
              <option value="2" selected="">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="6+">6+</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <label>Slutdatum och tid</label>
          <input type="text" name="date-check-out" class="datepicker datepicker--fluid" placeholder="Slutdatum" />
        </div>
        <div class="col-sm-2">
          <label></label>
          <div class="input-select input-select--borderless">
            <select name="guests">
              <option value="1">1</option>
              <option value="2" selected="">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="6+">6+</option>
            </select>
          </div>
        </div>
        <div class="col-sm-12">
          <label>Plats:</label>
          <input type="email" name="email" class="validate-required validate-email" />
        </div>
        <div class="col-sm-12">
          <label>Beskrivning:</label>
          <textarea rows="6" name="Message" class="validate-required"></textarea>
        </div>

        <div class="col-sm-12">
          <label></label>
          <div class="input-select input-select--borderless">
            <select name="guests">
            <option value="1" selected="">Kategori</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="6+">6+</option>
            </select>
          </div>
        </div>

        <div class="col-sm-3">
          <label>Guests</label>
          <div class="input-select input-select--borderless">
            <select name="guests">
              <option value="1">1</option>
              <option value="2" selected="">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="6+">6+</option>
            </select>
          </div>
        </div>
        <div class="col-sm-3">
          <label>Eventets namn:</label>
          <input type="text" name="Name" class="validate-required" />
        </div>
        <div class="col-sm-3">
          <label>Eventets namn:</label>
          <input type="text" name="Name" class="validate-required" />
        </div>
        <div class="col-sm-3">
          <label>Eventets namn:</label>
          <input type="text" name="Name" class="validate-required" />
        </div>

        <div class="container-button">
          <div class="col-sm-5 col-md-12">
            <button type="submit" class="btn btn--primary type--uppercase container-button">Lägg till biljettyp</button>
          </div>
        </div>



        <!-- </form> -->

      </div>
    </div>
    <!--end of row-->
  </div>
  <!--end of container-->
</section>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

将.container-button更改为使用margin-top而不是padding-top。边距将在元素之间创建空间。目前，您只是告诉它在元素中创建空间。

.container-button {
 margin-top: auto; /* Change to 20px or whatever */
 padding-top: 15px;
 }

答案 1 :(得分：0)

现在按钮填充正在使用 rem 属性，因为bootstrap始终设置此值按钮

.container {
      margin-right: auto;
      margin-left: auto;
      padding-left: 15px;
      padding-right: 15px;
    }

    @media (min-width: 768px) {
      .container {
        width: 750px;
      }
    }

    @media (min-width: 992px) {
      .container {
        width: 970px;
      }
    }

    @media (min-width: 1200px) {
      .container {
        width: 1170px;
      }
    }

    .container-button {
        margin-top: auto;
        padding: .375rem 5.75rem !important;
    }

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    <section class="text-center ">
      <div class="container">
        <div class="row">
          <div class="col-sm-10 col-md-7">

            <!-- <form class="text-left form-email" data-success="Thanks for your enquiry, we'll be in touch shortly." data-error="Please fill in all fields correctly." data-recaptcha-sitekey="6LewhCIUAAAAACSwFvBDhgtTbw6EnW6e9dip8o2u" data-recaptcha-theme="light"> -->
            <div class="col-sm-6">
              <label>Eventets namn:</label>
              <input type="text" name="Name" class="validate-required" />
            </div>
            <div class="col-sm-6">
              <label>Arrangeras av:</label>
              <input type="email" name="email" class="validate-required validate-email" />
            </div>
            <div class="col-sm-4">
              <label>Datum och tid</label>
              <input type="text" name="date-check-in" class="datepicker datepicker--fluid" placeholder="Startdatum" />
            </div>
            <div class="col-sm-2">
              <label></label>
              <div class="input-select input-select--borderless">
                <select name="guests">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="6+">6+</option>
                </select>
              </div>
            </div>
            <div class="col-sm-4">
              <label>Slutdatum och tid</label>
              <input type="text" name="date-check-out" class="datepicker datepicker--fluid" placeholder="Slutdatum" />
            </div>
            <div class="col-sm-2">
              <label></label>
              <div class="input-select input-select--borderless">
                <select name="guests">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="6+">6+</option>
                </select>
              </div>
            </div>
            <div class="col-sm-12">
              <label>Plats:</label>
              <input type="email" name="email" class="validate-required validate-email" />
            </div>
            <div class="col-sm-12">
              <label>Beskrivning:</label>
              <textarea rows="6" name="Message" class="validate-required"></textarea>
            </div>

            <div class="col-sm-12">
              <label></label>
              <div class="input-select input-select--borderless">
                <select name="guests">
                <option value="1" selected="">Kategori</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="6+">6+</option>
                </select>
              </div>
            </div>

            <div class="col-sm-3">
              <label>Guests</label>
              <div class="input-select input-select--borderless">
                <select name="guests">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="6+">6+</option>
                </select>
              </div>
            </div>
            <div class="col-sm-3">
              <label>Eventets namn:</label>
              <input type="text" name="Name" class="validate-required" />
            </div>
            <div class="col-sm-3">
              <label>Eventets namn:</label>
              <input type="text" name="Name" class="validate-required" />
            </div>
            <div class="col-sm-3">
              <label>Eventets namn:</label>
              <input type="text" name="Name" class="validate-required" />
            </div>

            <div class="container-button">
              <div class="col-sm-5 col-md-12">
                <button type="submit" class="btn btn--primary type--uppercase container-button">Lägg till biljettyp</button>
              </div>
            </div>



            <!-- </form> -->

          </div>
        </div>
        <!--end of row-->
      </div>
      <!--end of container-->
    </section>

<!-- end snippet -->
相关问题
最新问题