Почему у меня ширина кнопки на весь экран? - PullRequest
Новая
       34

Почему у меня ширина кнопки на весь экран?

0 голосов
/ 25 марта 2020

Я только начал изучать bootstrap и задавался вопросом, что случилось с моей кнопкой изображения. Требуется вся ширина экрана и я не знаю почему? Я могу уменьшить его, да, но мне интересно, почему это так? Обычно кнопки маленькие по умолчанию.

Кроме того, если вы видите что-то не так в моем коде или плохо написано, я был бы благодарен, если бы вы указали на это. 

    #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>

1 Ответ

1 голос
/ 25 марта 2020

Проблема в том, что вы пытаетесь стилировать div с классом buttons, ширина которого по умолчанию равна 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>
...