как выровнять содержимое двух столбцов в одной строке

Question

как выровнять содержимое двух столбцов в одной строке

0

ниже мой код

<div class="row">
       <div class="col-md-12">
            <div class="col-md-6">
                <label>name</label>
                <input type="text" class="form-input-icon">
            </div>
            <div class="col-md-6">
                <label></label>
                <label style="margin-top: 30px;">test</label>
            </div>
       </div>
  </div>

я создал два столбца в одной строке, первый столбец имеет метку, а в этом поле ввода следующий столбец имеет только метку, и он должен быть выровнен внутри строки с полем ввода, но так как только ярлык был там, он отображался сверху. Поэтому я написал один фиктивный ярлык. Тем не менее он не выровнен с полем ввода. как это сделать? Есть ли способ сделать это в бутстрапе?

apps 20 май 2016, в 09:13

Источник

Теги:

html

angularjs

css

angular-ui-bootstrap

2 ответа

Ещё вопросы

MIM · Answer 1 · 2016-05-20T06-57-00.000Z

Без Bootstrap:

это происходит потому, что вы помещаете каждую label внутри одного и того же тега div снова и снова.

            <div class="col-md-6">
                  <label>name</label>
                  <input type="text" class="form-input-icon">
            </div>
            <div class="col-md-6">
                  <label></label>
                  <label style="margin-top: 30px;">test</label>
            </div>

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

КАК СДЕЛАТЬ :

<div class="row">
       <div class="col-md-12">
            <div class="col-md-6">
                <label>name</label>
                <input type="text" class="form-input-icon">
            
                <label></label>
                <label style="margin-top: 30px;">test</label>
            </div>
       </div>
  </div>

Использование Bootstrap:

Да, вы можете сделать то же самое, используя бутстрап, даже это проще и выглядит красивее. вот вам простой пример. скопируйте этот код и запустите с помощью chrome или firefox или safari, этот код будет работать отлично, вы можете посетить этот сайт: более подробно или проверить это встроенную форму с помощью начальной загрузки

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Example of inline form</h2>
  <form class="form-inline" role="form">
    <div class="form-group">
      <label >Name : </label>
      <input type="email" class="form-control" id="name" placeholder="Enter your name ">
    </div>
    <div class="form-group">
      <label for="email">Email : </label>
      <input type="password" class="form-control" id="email" placeholder="enter your email">
    </div>
    
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>


</body>
</html>

Mohammad Usman · Answer 2 · 2016-05-20T04-35-00.000Z

Добавить   между label. Там должно быть некоторое содержимое внутри label чтобы заставить его работать. Поэтому просто добавьте html код пустого пространства.

<label>&nbsp;</label>

Однако лучший подход будет без столбцов начальной загрузки и использования пользовательского css следующим образом:

.column-holder {
  table-layout: fixed;
  display: table;
  width: 100%;
}

.column-holder .column {
  vertical-align: bottom;
  display: table-cell;
  padding: 0 15px;
}

label {
  display: block;
}

input {
  display: block;
  width: 100%;
}

<div class="column-holder">
  <div class="column">
    <label>name</label>
    <input type="text" class="form-input-icon">
  </div>
  <div class="column">
    <label>test</label>
  </div>
</div>