Каждое текстовое поле должно быть в новой строке на панели - PullRequest
Новая
       0

Каждое текстовое поле должно быть в новой строке на панели

0 голосов
/ 28 февраля 2020

Я создал панель для своей веб-страницы. Панель содержит два текстовых поля с метками. На данный момент два текстовых поля находятся в одной строке. Я хочу, чтобы каждое текстовое поле находилось в отдельной строке. как мне это сделать? Я попытался включить <br> внутри панели. 

<html>

<head>


    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style>
        .navbar img {
            float: left;
            width: 80px;
            height: 80px;
            position: relative;
            top: -12px;

        }

        .navbar h1 {
            top: 18px;
            font-size: 30px;
            color: brown;
            text-align: center;
        }

        .navbar {
            min-height: 80px;
        }

    </style>

</head>

<body style="background-color:powderblue;">
    <nav class="navbar navbar-default header">
        <div class="container-fluid">
            <div class="navbar-header">

                <h1>My heading</h1>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">
                <p>Thankyou for applying with us. To schedule an interview please fill the below details </p>

            <div class="form-group">
                <label class="col-md-3 control-label"><span style="color:red">*</span>Enter your name</label>
                <div class="col-md-3">
                    <input id="candidate-name" name="candidate-name" type="text" placeholder="John"
                        class="form-control input-md" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label"><span style="color:red">*</span>Enter your email</label>
                <div class="col-md-3">
                    <input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe@example.com"
                        class="form-control input-md" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label" for="save"></label>
                <div class="col-md-8">
                    <input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
                </div>
            </div>
        </div>
    </div>
    </div>



</body>

</html>

Я вижу два текстовых поля с именем и адресом электронной почты, приходящими в одну строку. Я пробовал 

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

, ссылаясь на эту ссылку https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_stacked_form, но это не работает. Что я делаю не так?

Ответы [ 2 ]

1 голос
/ 28 февраля 2020

Вы хотите что-то подобное? enter image description here

                <div class="form-group">
                <div class="row">
                    <label class="col-md-4 control-label"><span style="color:red">*</span>Enter your name</label>
                    <div class="col-md-7">
                        <input id="candidate-name" name="candidate-name" type="text" placeholder="John"
                            class="form-control input-md" required>
                    </div>
                </div>

            </div>
            <div class="form-group">
                <div class="row">
                    <label class="col-md-4 control-label"><span style="color:red">*</span>Enter your email</label>
                    <div class="col-md-7">
                        <input id="candidate-email" name="candidate-email" type="email"
                            placeholder="johndoe@example.com" class="form-control input-md" required>
                    </div>
                </div>
            </div>

Или вот так:

enter image description here

    <div class="container">
    <div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
        <div class="panel-heading">Panel Heading</div>
        <div class="panel-body">
            <p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-3 col-sm-3 clo-xs-3">
                  <div class="form-group">
                    <label class="formGroupExampleInput" for="formGroupExampleInput">Enter your name</label>
                    <input id="afm" class="form-control custom-input-text"  placeholder="">             
                  </div>
                </div>
                <div class="col-lg-6 col-md-3 col-sm-4 clo-xs-3" >
                  <div class="form-group">
                    <label class="formGroupExampleInput" for="formGroupExampleInput">Enter your email</label>
                    <input id="afm" class="form-control custom-input-text"  placeholder="">
                  </div>
                </div>
              </div>
    </div>
</div>
</div>
0 голосов
/ 28 февраля 2020

Проблема использует col Удалите эту col форму label, и input решит проблему 

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.navbar img {
            float: left;
            width: 80px;
            height: 80px;
            position: relative;
            top: -12px;

        }

        .navbar h1 {
            top: 18px;
            font-size: 30px;
            color: brown;
            text-align: center;
        }

        .navbar {
            min-height: 80px;
        }
<head>


    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body style="background-color:powderblue;">
    <nav class="navbar navbar-default header">
        <div class="container-fluid">
            <div class="navbar-header">

                <h1>My heading</h1>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">
                <p>Thankyou for applying with us. To schedule an interview please fill the below details </p>

            <div class="form-group ">
                <label class=" control-label"><span style="color:red">*</span>Enter your name</label>
                <div class="">
                    <input id="candidate-name" name="candidate-name" type="text" placeholder="John"
                        class="form-control input-md" required>
                </div>
            </div>
            <div class="form-group">
                <label class=" control-label"><span style="color:red">*</span>Enter your email</label>
                <div class="">
                    <input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe@example.com"
                        class="form-control input-md" required>
                </div>
            </div>
            <div class="form-group">
                <label class=" control-label" for="save"></label>
                <div class="">
                    <input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
                </div>
            </div>
        </div>
    </div>
    </div>



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

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

...