为什么我的按钮宽度适用于整个屏幕？答案

【问题标题】：Why has my button width for whole screen?为什么我的按钮宽度适用于整个屏幕？
【发布时间】：2020-03-25 16:48:30
【问题描述】：

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

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

    #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>
  
      
    
      <div class="button">
        <button class="btn">
          <i class="fa fa-home"></i>
        </button>
      </div>

【问题讨论】：

你的意思是为什么蓝色背景和屏幕一样大？
按钮或容器上没有宽度，因此它将采用外部容器或浏览器窗口的宽度。如果你添加一个宽度，它会因为你的边距而居中对齐，你可能不希望这样。
问题的答案是：因为.button是一个div，而不是一个按钮。默认情况下，div 采用 100% 的宽度。但是从您的 cmets 中，我了解到真正的答案是，如果您想为 button 赋予颜色，请使用按钮作为选择器而不是 div。
@MrLister AndroidAnton 希望您发布您的评论作为被接受的答案（大约 10 分钟前说过，但您没有在评论中被标记）
@RachelGallen 谢谢！

标签： html css button bootstrap-4

【解决方案1】：

问题是您尝试使用类buttons 设置div 的样式，默认情况下其宽度为100%。您的意思是改为设置其中的按钮样式。所以解决办法很简单：把.buttons选择器改成.buttons button.btn。

#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 button.btn {    /* changed */
  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" 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">
  <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>



<div class="button">
  <button class="btn">
      <i class="fa fa-home"></i>
    </button>
</div>

【讨论】：