为什么我的按钮宽度为整个屏幕？

Question

我刚刚开始学习引导程序，想知道我的图像按钮发生了什么。它占据了整个屏幕的宽度，我不知道为什么？我可以减少它，是的，但我想知道为什么会这样？通常按钮默认都很小。

另外，如果您发现我的代码有问题或写得不好，如果您能指出来，我将不胜感激。

  #grid div {

        background: black;

        border: 3px solid #000;

    }

    #grid {

        padding-bottom: 50px;

    }

    ul {

        padding-right: 50px;

    }

    li {

        padding-left: 30px;

    }

    a {

        color: white;

        font-family: Verdana, Geneva, Tahoma, sans-serif;

    }

    h1 {

        font-family: Verdana, Geneva, Tahoma, sans-serif;

        text-align: center;

        font-weight: bold;

        margin-bottom: 100px;

    }

    #function {

        margin-left: auto;

        margin-right: auto;

    }

    .button {

        background-color: DodgerBlue;

        margin-left: auto;

        margin-right: auto;

    

    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid" id="grid">

        <div class="row">

          <div class="col-sm">

            <ul class="nav justify-content-end">

                <li class="nav-item">

                  <a class="nav-link active" href="#">Converter</a>

                </li>

                <li class="nav-item">

                  <a class="nav-link" href="#">More Products</a>

                </li>

                <li class="nav-item">

                  <a class="nav-link" href="#">About</a>

                </li>

                

            </ul>

          </div>

          

          

  

        </div>

        

  

      </div>

      <h1>Convert your jks to p12!</h1>

      <div class="container">

        <div class="row">

          <div class="col-lg-6" id="function">

            <div class="input-group">

                <div class="custom-file">

                  <input type="file" class="custom-file-input" id="inputGroupFile01"

                    aria-describedby="inputGroupFileAddon01">

                  <label class="custom-file-label" for="inputGroupFile01">Choose file</label>

                </div>

              </div>

          </div>

  

        </div>

      </div>

Answer 1

问题是您正在尝试使用 class 来设置 div 的样式buttons，默认情况下其宽度为 100%。您想要做的是设置其中按钮的样式。所以解决方案很简单：将.buttons选择器更改为.buttons button.btn.#grid div {&nbsp; background: black;&nbsp; border: 3px solid #000;}#grid {&nbsp; padding-bottom: 50px;}ul {&nbsp; padding-right: 50px;}li {&nbsp; padding-left: 30px;}a {&nbsp; color: white;&nbsp; font-family: Verdana, Geneva, Tahoma, sans-serif;}h1 {&nbsp; font-family: Verdana, Geneva, Tahoma, sans-serif;&nbsp; text-align: center;&nbsp; font-weight: bold;&nbsp; margin-bottom: 100px;}#function {&nbsp; margin-left: auto;&nbsp; margin-right: auto;}.button button.btn {&nbsp; &nbsp; /* changed */&nbsp; background-color: DodgerBlue;&nbsp; margin-left: auto;&nbsp; margin-right: auto;}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"><div class="container-fluid" id="grid">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-sm">&nbsp; &nbsp; &nbsp; <ul class="nav justify-content-end">&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link active" href="#">Converter</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="#">More Products</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="#">About</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; </div></div><h1>Convert your jks to p12!</h1><div class="container">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-lg-6" id="function">&nbsp; &nbsp; &nbsp; <div class="input-group">&nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-file">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-file-label" for="inputGroupFile01">Choose file</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div><div class="button">&nbsp; <button class="btn">&nbsp; &nbsp; &nbsp; <i class="fa fa-home"></i>&nbsp; &nbsp; </button></div>