Кнопка не выровнена, когда экран узкий - PullRequest
Новая
       31

Кнопка не выровнена, когда экран узкий

0 голосов
/ 13 апреля 2020

Я хочу выровнять кнопку, чтобы адаптировать мое веб-приложение. Кнопка правильно выровнена, когда экран большой:

Кнопка правильно выровнена

Вот снимок, когда кнопка выровнена неправильно:

Кнопка неправильно выровнена

Это образец: 

  body{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #message_bienvenue{
    margin: 10px;
    text-align: center;
    width: 100%;
  }
  
  #bouton_mission{
    margin: 0 auto;
  }
  
  #livraison_chauffeur{
    margin: 0 auto;
    padding-top: 20px;
    width: 90%;
  }
  
  .container-fluid{
    margin-top: 70px !important;
  }

  /* BOUTON */
  .btn-circle.btn-xl {
    position: relative;
    width: 70px;
    border-radius: 45px;
    font-size: 34px;
    padding: 0px;
    margin: 5px
  }
  
  .btn-circle.btn-xl img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  
  .btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
    background-color: rgba(255, 255, 255, 0);
  }
  
  .text-button{
    margin-top: 40px;
  }
  
  .text-button label{
    font-size: 11px;
  }
  
  .block-mission{
    text-align: center;
  }
  
  .block-mission label{
      margin-top: 20px;
  }
  
  .btn-1 {
      background-image: url("https://pngimage.net/wp-content/uploads/2018/06/icon-ok-png-2.png");
      background-size: contain;
      background-repeat: no-repeat;
      width: 40px;
      height: 40px;
  }
  
  .btn-2 {
      background-image: url("https://pngimage.net/wp-content/uploads/2018/06/icon-ok-png-2.png");
      background-size: contain;
      background-repeat: no-repeat;
      width: 70px;
      height: 70px;
  }
  
  .btn-3 {
      background-image: url("https://pngimage.net/wp-content/uploads/2018/06/icon-ok-png-2.png");
      background-size: contain;
      background-repeat: no-repeat;
      width: 40px;
      height: 40px;
  }
<!doctype html>
<html lang="fr">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="icon" href="">
	<title>Title</title>
	<!-- Bootstrap core CSS -->

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>

<body>

	<div class="container-fluid" style="margin-top: 0px !important">
		<form method="post" action="requetes/page.php" role="form" id="formulaire">
		<h3>Créer mission :</h3>
		<hr/>
		<input class="form-control" id="numero_bon" type="number" min="0" name="numero_bon" placeholder="Numéro de bon de livraison" required>
		<hr/>
		<input class="form-control" id="nom_client" name="nom_client" type="text" placeholder="Client" required>
		<hr/>
		<input class="form-control" id="adresse_client" name="adresse_client" type="text" placeholder="Adresse" required>
		<hr/>
		<input class="form-control" id="volume_livraison" type="number" name="volume_livraison" placeholder="M³" pattern="[0-9]+([\.,][0-9]+)?" step="0.01" formnovalidate required>
		<hr/>
		<input class="form-control" id="nom_centrale"type="text" name="nom_centrale" placeholder="Centrale" required>
		<hr/>
		<span class="label label-default">Zone</span>
		<select class="form-control form-control-sm" id="zone" type="text" name="zone">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>
			<option>7</option>
			<option>8</option>
			<option>9</option>
			<option>10</option>
			<option>11</option>
			<option>12</option>
			<option>13</option>
			<option>14</option>
			<option>15</option>
			<option>16</option>
			<option>17</option>
			<option>18</option>
			<option>19</option>
			<option>20</option>
		</select>
		<hr/>

		<div class="container-fluid" style="margin-top: 0 !important">
			<div class="row d-flex justify-content-around">
				<div class="d-flex flex-column align-items-center block-mission">
          <button class="btn btn-circle btn-small btn-1" id="creer_mission_replacee" name="type_voyage" value="Replacé" type="submit">
          </button>
            <label>Voyage validé replacé</label>
        </div>
				<div class="d-flex flex-column align-items-center block-mission">
					<button class="btn btn-circle btn-small btn-2" id="creer_mission" name="type_voyage" value="Livré" type="submit">
						</button>
						<label>Livraison effectuée validée</label>
				</div>
				<div class="d-flex flex-column align-items-center block-mission">
					<button class="btn btn-circle btn-small btn-3" id="creer_mission_annulee" name="type_voyage" value="Annulé" type="submit">
						</button>
						<label>Voyage annulé</label>
				</div>
			</div>
		</div>
	</form>
	</div>

</body>

</html>

Кто-нибудь может исправить мой код? Я не знаю как это сделать? К проблеме: Нажмите Run code snippet -> Full page -> Уменьшите границу вашего браузера до минимума.

Ответы [ 5 ]

1 голос
/ 13 апреля 2020

Для класса btn-circle используйте этот код 

.btn-circle {
  width: 40px;
  padding: 0;
  margin: auto;
  height: 40px;
}

надеюсь, это поможет вам

0 голосов
/ 13 апреля 2020 

.parrent_div{display:flex;
justify-content:center;
flex-direction:row;
}
.button {
width:100%
}

будет автоматически выравнивать ваши элементы в соответствии с разрешением экрана

0 голосов
/ 13 апреля 2020

просто удалите класс "row", если вы все еще хотите, чтобы они были выровнены по горизонтали, но вам, возможно, придется изменить размер текста кнопки, чтобы он выглядел действительно хорошо.

0 голосов
/ 13 апреля 2020

Просто используйте Bootstrap col для каждого элемента в строке для него. как это: 

    <div class="container-fluid" style="margin-top: 0 !important">
        <div class="row justify-content-around">
            <div class="col flex-column align-items-center block-mission">
                <button class="btn btn-circle btn-small btn-1" id="creer_mission_replacee" name="type_voyage" value="Replacé" type="submit">
  </button>
                <label>Voyage validé replacé</label>
            </div>
            <div class="col flex-column align-items-center block-mission">
                <button class="btn btn-circle btn-small btn-2" id="creer_mission" name="type_voyage" value="Livré" type="submit">
                </button>
                <label>Livraison effectuée validée</label>
            </div>
            <div class="col flex-column align-items-center block-mission">
                <button class="btn btn-circle btn-small btn-3" id="creer_mission_annulee" name="type_voyage" value="Annulé" type="submit">
                </button>
                <label>Voyage annulé</label>
            </div>
        </div>
    </div>

см .: https://jsfiddle.net/sugandhnikhil/gkduhbs2/

0 голосов
/ 13 апреля 2020

Если я правильно читаю ваш вопрос, звучит так, будто вы не хотите, чтобы кнопки теряли выравнивание, потому что вы хотели бы, чтобы они оставались в ряд на одной строке, как на рабочем столе. Если это так, то вы можете исправить это, добавив свойство и значение в класс «.justify-content-around» следующим образом. 

.justify-content-around {
  flex-wrap: nowrap;
}

Вот действительно отличное руководство по flexbox CSS: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Потенциально, однако, вы можете попробовать более удобное для мобильных устройств выравнивание кнопки, которое, вероятно, немного изменит ситуацию, но, возможно, просто немного сожмет кнопки в мобильном представлении. И если это так, то ответ Удаявани, приведенный выше, будет полезен в сочетании с моим, с использованием медиа-запроса в точке останова, в которой вы хотели бы увидеть изменение, например: 

@media (max-width: 768px) {

    .btn-circle {
        width: 40px;
        padding: 0;
        margin: auto;
        height: 40px;
    }

}

Вот справочник для медиа-запросов: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

...