0

我有这个 html 文本

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


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

<div class="form-group" style="display:inline-block; width:48%;padding-right: 5%;">
  <label for="glossary_entry_input_1">Lemma IT</label>
  <input type="text" class="form-control" id="glossary_entry_input_1" placeholder="">              
</div>

<div class="form-group" style="display:inline-block; width:48%; padding-left: 5%;">
		<label for="glossary_entry_input_2">Lemma CH</label>
		<input type="text" class="form-control" id="glossary_entry_input_2" placeholder="">              
</div>

<div class="form-group">
                    <label for="glossary_entry_input_3">Acronimo IT</label>
                    <small id="inputHelp" class="form-text text-muted">Inserire una sigla (se esiste) del Lemma. Nel caso in cui il lemma sia una grandezza fisica, inserire la lettera o il simbolo che la identifica.</small>
                    <input type="text" class="form-control" id="glossary_entry_input_3" placeholder="">              
            </div>  

</div>

如您所见，生成以下表单字段，对齐一行

在此处输入图像描述

我想通过将第二个向右移动，将它们与我的 html 页面的垂直轴对称地显示，如您所见

在此处输入图像描述

这样“引理 CH”框的左边距与“Acronimo IT”框之一对齐。如何更改我的代码才能获得第二张图片中显示的结果？

4

3 回答 3

1

这是我的解决方案。我已将以下代码添加到“引理 CH”框中。希望它能满足你的要求。

float: right;


<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


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

<div class="form-group" style="display:inline-block; width:48%;padding-right: 5%;">
  <label for="glossary_entry_input_1">Lemma IT</label>
  <input type="text" class="form-control" id="glossary_entry_input_1" placeholder="">              
</div>

<div class="form-group" style="display:inline-block; width:48%; padding-left: 5%; float: right;">
		<label for="glossary_entry_input_2">Lemma CH</label>
		<input type="text" class="form-control" id="glossary_entry_input_2" placeholder="">              
</div>

<div class="form-group">
                    <label for="glossary_entry_input_3">Acronimo IT</label>
                    <small id="inputHelp" class="form-text text-muted">Inserire una sigla (se esiste) del Lemma. Nel caso in cui il lemma sia una grandezza fisica, inserire la lettera o il simbolo che la identifica.</small>
                    <input type="text" class="form-control" id="glossary_entry_input_3" placeholder="">              
            </div>  

</div>

于 2019-07-11T10:06:17.443 回答
1

您可以使用他们的文档..

https://getbootstrap.com/docs/4.0/components/forms/#form-row

我建议您使用 bootstrap 文档，因为无论如何您都在使用 bootstrap。创建您的表单将需要进一步的 CSS 来满足响应式设计。使用文档和引导程序会照顾你。

希望这可以帮助。

于 2019-07-11T10:08:19.417 回答
1

浮动权利不是正确的解决方案。尝试这个。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="glossary-form"></div>
<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <label for="glossary_entry_input_1">Lemma IT</label>
      <input type="text" class="form-control" id="glossary_entry_input_1" placeholder="">
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <label for="glossary_entry_input_2">Lemma CH</label>
      <input type="text" class="form-control" id="glossary_entry_input_2" placeholder="">
    </div>
  </div>

</div>
<div class="row">
  <div class="col-md-12">
    <div class="form-group">
      <label for="glossary_entry_input_3">Acronimo IT</label>
      <small id="inputHelp" class="form-text text-muted">Inserire una sigla (se esiste) del Lemma. Nel caso in cui il
        lemma sia una grandezza fisica, inserire la lettera o il simbolo che la identifica.</small>
      <input type="text" class="form-control" id="glossary_entry_input_3" placeholder="">
    </div>

  </div>
</div>
</div>

于 2019-07-11T10:44:03.243 回答