Центрирование формы в Bootstrap? - PullRequest
Новая
       8

Центрирование формы в Bootstrap?

0 голосов
/ 30 октября 2018

У меня проблемы с центрированием формы в Bootstrap. Форма включает в себя имя и поле для комментариев, включая кнопку сообщения.

Вот что у меня есть: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
<form id ="Form" onsubmit ="return false">
<div class="mx-auto"style="width: 200px;"> 
  <label for="usr">Name:</label>
  <input type="text"  id="name" >
<br>
<br>
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
  <br>
  <button onClick ="myFunction()">Post</button>
  </form>
  <br>
  <ul id="adduserinput"></ul>
  </div>
</div>
</div>

</body>
</html>

Когда вы запускаете код, форма появляется только в левой части страницы. Это не будет центрировать страницу. Кто-нибудь может мне помочь с этим?

Ответы [ 5 ]

0 голосов
/ 30 октября 2018

Если вы хотите пойти по пути Bootstrap, вы можете пойти с классами col и col смещение . Кроме того, старайтесь избегать элементов фиксированной ширины, если вы хотите, чтобы он был адаптивным для всех размеров экрана. Более того, используйте form-groups классы для переноса меток и связанного с ними ввода. Я покажу вам пример этого (вы можете играть с шириной браузера): 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <form id="Form" onsubmit="return false">
    <div class="col-sm-offset-3 col-sm-6">
      <br>
      <div class="form-group">
        <label for="name">Name:</label>
        <input class="form-control" type="text" id="name"/>
      </div>
      <div>
        <label for="comment">Comment:</label>
        <textarea class="form-control" rows="5" id="comment" style="resize:vertical"></textarea>
      </div>          
      <br>
      <button class="btn btn-primary" onClick="myFunction()">
        Post
      </button>  
    </div>
  </form>  
</div>

Как вы можете заметить, формуляр сосредоточен на экранах малого, среднего и большого размера , но при этом используется полная ширина на очень маленьких устройствах. Надеюсь, это поможет вам.

0 голосов
/ 30 октября 2018

Как сказал @MichaelvE, mx-auto работает для Bootstrap 4, а не 3. Метод, который я использую с 3, - это добавление класса text-center к тегу формы (или помещение их в <div class="text-center">...</div>. У меня отлично работает.

Примечание: он не центрирует только текст, как следует из названия.

0 голосов
/ 30 октября 2018

Класс mx-auto не работает для Bootstrap 3. Если вы используете Bootstrap 4, он не будет работать без проблем. Если вам нужно использовать Bootstrap 3, поместите свой собственный стиль с полем: 0 auto; 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="mx-auto" style="width: 200px;">
    <form id="Form" onsubmit="return false">
      <label for="usr">Name:</label>
      <input type="text" id="name">
      <br>
      <br>
      <label for="comment">Comment:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
      <br>
      <button onClick="myFunction()">Post</button>
    </form>
  </div>
  <br>
  <ul id="adduserinput">
  </ul>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
0 голосов
/ 30 октября 2018

Это поможет вам сделать ваш центр формы страницы. 

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; // optional this is only to get full height
}
0 голосов
/ 30 октября 2018 

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">



  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    #Form {
      margin: 0 auto;
      width: 200px;
    }
  </style>
</head>

<body>
  <div class="container">
    <form id="Form" onsubmit="return false">
      <div class="mx-auto" style="width: 200px;">
        <label for="usr">Name:</label>
        <input type="text" id="name">
        <br>
        <br>
        <label for="comment">Comment:</label>
        <textarea class="form-control" rows="5" id="comment"></textarea>
        <br>
        <button onClick="myFunction()">Post</button>
    </form>
    <br>
    <ul id="adduserinput"></ul>
    </div>
  </div>
  </div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...