Как разместить две группы ввода рядом друг с другом в форме boostrap - PullRequest
Новая
       82

Как разместить две группы ввода рядом друг с другом в форме boostrap

3 голосов
/ 04 октября 2019

Я пытаюсь создать макет формы, где два элемента form-group расположены рядом на одной строке. Я пробовал стилизацию со следующими свойствами;display:inline, display:flex и т. Д., Однако ни один из них не сработал.

Вот фрагмент из form-group элементов, которые я хочу видеть рядом: 

<div class="form-group">
    <label for="entercomments" class="col-sm-2 control-label">From Date</label>
    <div class="col-sm-10">
        <div class="input-group fromdate inline"  data-date-format="yyyy-mm-dd" style="width:250px">
            <input type="text" class="form-control fromdate"  placeholder="dd-mmm-yyyy" id="FromDate" runat="server" data-date-container="#formDiv" />
            <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
    </div>
</div>
<div class="form-group">
    <label for="entercomments" class="col-sm-2 control-label">To Date</label>
    <div class="col-sm-10">
        <div class="input-group todate inline" data-date-format="yyyy-mm-dd" style="width:250px">
            <input type="text" class="form-control todate" placeholder="dd-mmm-yyyy" id="ToDate" runat="server" data-date-container="#formDiv"  />
            <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
    </div>
</div>

Ответы [ 4 ]

2 голосов
/ 04 октября 2019

Видя, что вы используете Bootstrap, вы можете использовать загрузочные системы grid system здесь для достижения требуемого макета: 

<div class="row">
  <div class="col">
    <div class="form-group">
      <!-- Existing form group markup -->
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <!-- Existing form group markup -->
    </div>
  </div>
</div>

Идея заключается в том, чтобы заключить элементы «группы форм», которые вы хотите выровнять, в одну строку, в «столбец» (т. Е. <div class="col">). Каждый столбец затем включается в общую «строку» (т. Е. <div class="row">), и по умолчанию это приводит к тому, что каждый столбец разделяет половину ширины строки.

1 голос
/ 04 октября 2019

используйте сетку формы bootstrap4, проверьте эти 2 примера 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<form class="p-3">
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

<form class="p-3">
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>
0 голосов
/ 04 октября 2019

Я думаю, вам нужно сделать область вокруг двух форм. 

<div style="display: inline-flex">
  <div class="form-group">

  </div>
  <div class="form-group">

  </div>
</div>
0 голосов
/ 04 октября 2019

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

<div class="row">
  <div class="col">
     <input type="text" class="form-control">
  </div>
  <div class="col">
     <input type="text" class="form-control">
  </div>
</div>
...