Блог

Главная - Вопросы по программированию - Центр навигации по таблеткам и загрузка содержимого таблеток

Центр навигации по таблеткам и загрузка содержимого таблеток

#html #css #twitter-bootstrap #bootstrap-4

Вопрос:

В настоящее время я работаю над проектом, который включает в себя форму входа и регистрации. Я решил использовать для этого таблетки bootstrap.

Это html-форма для входа и регистрации

 <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a
        >

      </li>
      <li class="nav-item" role="presentation">
        <a
          class="nav-link"
          id="tab-register"
          data-mdb-toggle="pill"
          href="#pills-register"
          role="tab"
          aria-controls="pills-register"
          aria-selected="false"
          >Register</a
        >
      </li>
    </ul>
    <!-- Pills navs -->

    <!-- Pills content -->
    <div class="tab-content">
      <div
        class="tab-pane fade show active"
        id="pills-login"
        role="tabpanel"
        aria-labelledby="tab-login"
      >

        <form action="/login" method="post">

          <br>
          <!-- Email/Username input -->
          <div class="form-outline mb-4 login">
            <input type="text" id="loginCred" name="loginCred" autofocus autocomplete="off" class="form-control" />
            <label class="form-label" for="loginCred">Email or username</label>
          </div>
          <br>

          <!-- Password input -->
          <div class="form-outline mb-4 login">
            <input type="password" id="loginPassword" name="loginPassword" class="form-control" />
            <label class="form-label" for="loginPassword">Password</label>
          </div>

          <!-- 2 column grid layout -->
          <div class="row mb-4">

            <div class="col-md-12 d-flex justify-content-center">
              <!-- Simple link -->
              <a href="#!">Forgot password?</a>
    </div>

    </div>

    <!-- Submit button -->
    <button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>

    <!-- Register button -->
    <div class="text-center">
      <p>Not a member? <a id="reg" href="">Register</a></p>
    </div>
    </form>
    </div>

    <div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="tab-register">
      <form action="/register" method="post" onchange="onFormUpdate()">
        <br>
        <!-- Name input -->
        <div class="form-outline mb-4 register">
          <input type="text" id="registerName" name="registerName" autofocus autocomplete="off" class="form-control" />
          <label class="form-label" for="registerName">Full Name</label>
        </div>

        <!-- Username input -->
        <div class="form-outline mb-4 register">
          <input type="text" id="registerUsername" name="registerUsername" autocomplete="off" class="form-control" />
          <label class="form-label" for="registerUsername">Username</label>
        </div>

        <div class="row-sm-3 mb-2">
          <small id="passwordHelp" class="text-danger"></small>
        </div>

        <!-- Email input -->
        <div class="form-outline mb-4 register">
          <input type="email" id="registerEmail" name="registerEmail" autocomplete="off" class="form-control" />
          <label class="form-label" for="registerEmail">Email</label>
        </div>

        <!-- Password input -->
        <div id="pass" class="form-outline mb-4 register">
          <input type="password" id="registerPassword" name="registerPassword" class="form-control" />
          <label class="form-label" for="registerPassword">Password</label>
        </div>

        <div class="row-sm-3 mb-2">
          <small id="passwordHelp" class="text-danger"></small>
        </div>

        <!-- Confirm Password input -->
        <div id="confirm-pass" class="form-outline mb-4 register">
          <input type="password" id="registerConfirmPassword" name="registerConfirmPassword" class="form-control" />
          <label class="form-label" for="registerConfirmPassword">Confirm Password</label>
        </div>

        <div class="row-sm-3 mb-2">
          <small id="confirmPasswordHelp" class="text-danger"></small>
        </div>

        <!-- Checkbox -->
        <div class="form-check d-flex justify-content-center mb-4">
          <input class="form-check-input me-2" type="checkbox" value="" id="registerCheck" aria-describedby="registerCheckHelpText" />
          <label class="form-check-label" for="registerCheck">
              I have read and agree to the <a href="/terms">terms and conditions </a>
            </label>
        </div>

        <!-- Submit button -->
        <button type="submit" id="register" disabled="disabled" class="btn btn-dark btn-block mb-3">Register</button>

        <!-- Login button -->
        <div class="text-center">
          <p>Already a member? <a id="log" href="">Log in</a></p>
        </div>
      </form>
    </div>
    </div>
    <!-- Pills content -->

Как вы можете видеть, форма растянута по всей странице. Поэтому я попытался свести его к минимуму с помощью начальной w-50 загрузки, как вы можете видеть ниже

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet"/>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3 w-50" id="ex1" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a
        >

      </li>
      <li class="nav-item" role="presentation">
        <a
          class="nav-link"
          id="tab-register"
          data-mdb-toggle="pill"
          href="#pills-register"
          role="tab"
          aria-controls="pills-register"
          aria-selected="false"
          >Register</a
        >
      </li>
    </ul>
    <!-- Pills navs -->

    <!-- Pills content -->
    <div class="tab-content">
      <div
        class="tab-pane fade show active"
        id="pills-login"
        role="tabpanel"
        aria-labelledby="tab-login"
      >

        <form action="/login" method="post">

          <br>
          <!-- Email/Username input -->
          <div class="form-outline mb-4 w-50 login">
            <input type="text" id="loginCred" name="loginCred" autofocus autocomplete="off" class="form-control" />
            <label class="form-label" for="loginCred">Email or username</label>
          </div>
          <br>

          <!-- Password input -->
          <div class="form-outline mb-4 login">
            <input type="password" id="loginPassword" name="loginPassword" class="form-control" />
            <label class="form-label" for="loginPassword">Password</label>
          </div>

          <!-- 2 column grid layout -->
          <div class="row mb-4">

            <div class="col-md-12 d-flex justify-content-center">
              <!-- Simple link -->
              <a href="#!">Forgot password?</a>
    </div>

    </div>

    <!-- Submit button -->
    <button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>

    </div>
    <!-- Pills content -->

Теперь возникает еще одна проблема. От выровнено по левому краю. Я поискал и нашел несколько ответов, но большинство из них использовали гибкие и сетки. Я не мог использовать его в своем коде. Я ничего не нашел о навигационных таблетках и навигационном содержимом.

Любая помощь в центрировании формы приветствуется.

Редактировать: Я пробовал использовать justify-content-center , но это тоже не сработало.

Ответ №1:

Вы можете использовать .mx-auto класс вместе со своим .w-50 классом, он будет горизонтально центрировать вашу форму

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet"/>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3 w-50 mx-auto" id="ex1" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a
        >

      </li>
      <li class="nav-item" role="presentation">
        <a
          class="nav-link"
          id="tab-register"
          data-mdb-toggle="pill"
          href="#pills-register"
          role="tab"
          aria-controls="pills-register"
          aria-selected="false"
          >Register</a
        >
      </li>
    </ul>
    <!-- Pills navs -->

    <!-- Pills content -->
    <div class="tab-content">
      <div
        class="tab-pane fade show active"
        id="pills-login"
        role="tabpanel"
        aria-labelledby="tab-login"
      >

        <form action="/login" method="post">

          <br>
          <!-- Email/Username input -->
          <div class="form-outline mb-4 w-50 login">
            <input type="text" id="loginCred" name="loginCred" autofocus autocomplete="off" class="form-control" />
            <label class="form-label" for="loginCred">Email or username</label>
          </div>
          <br>

          <!-- Password input -->
          <div class="form-outline mb-4 login">
            <input type="password" id="loginPassword" name="loginPassword" class="form-control" />
            <label class="form-label" for="loginPassword">Password</label>
          </div>

          <!-- 2 column grid layout -->
          <div class="row mb-4">

            <div class="col-md-12 d-flex justify-content-center">
              <!-- Simple link -->
              <a href="#!">Forgot password?</a>
    </div>

    </div>

    <!-- Submit button -->
    <button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>

    </div>
    <!-- Pills content -->

Комментарии:

1. Большое вам спасибо за ваш полезный ответ. Я совершенно скучал по этому.

Метки: