Question

就在我以为我理解了引导程序时，它对我不起作用:(

我需要有2列，其中每列都有一个带有小文本框的问题，用于输入数字。

我想要的例子

__表示
下方的小文本框

_____________________________________________________________________________________________
Group 1                                                     |  Group 2    
1. Are you Prone to Infection, colds, coughs, or flu? ___   | 1. What is your weight ____                                                | 2. adfafafa 
2. Do you have inflammation, Heat spots ? __                |

我似乎在水平或内联形式上挣扎，因为它们包裹或太远或太近等等。

<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="border:1px solid black;">
        <div class="form-inline">
            <label>1. Are you Prone to Infection, colds, coughs, or flu? </label>
            <input id="group1A" [(ngModel)]="group1A" name="group1A" style="width: 5px;" type="text" class="form-control" placeholder="">
            <br>
            <label for="group1B">Do you have inflammation, Heat spots ? </label>
            <input id="group1B" [(ngModel)]="group1B" name="group1B" type="text" class="form-control" placeholder="">

            <label for="group1C">Do you have specific pain (printed form - list on Back)</label>
            <input id="group1C" [(ngModel)]="group1C" name="group1C" type="text" class="form-control" placeholder="">

            <label for="group1D">Do you have swelling?</label>
            <input id="group1D" [(ngModel)]="group1D" name="group1D" type="text" class="form-control" placeholder="">

            <label for="group1E">Do you have pus, open sores, skin problems, mucus formation?</label>
            <input id="group1E" [(ngModel)]="group1E" name="group1E" type="text" class="form-control" placeholder="">
        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="border:1px solid black;">
        <div class="form-inline">
        ......
    </div>
</div>

Answer 1

我认为更好的事情就是使用＆＃34; col-md-6＆＃34;在每组中

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
  <div class="row">

    <div class="col-md-6 form-inline" style="border:1px solid black;">
      GROUP 1
    </div>

    <div class="col-md-6 form-inline" style="border:1px solid black;">
      GROUP 2
    </div>

  </div>
</div>

＆＃13;

检查此https://getbootstrap.com/docs/3.3/css/#grid-example-basic
例如：

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Answer 2

也许你想要的是这样的

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="border:1px solid black;">
      <div class="form-group row">
        <label class="col-sm-8 col-form-label">1. Are you Prone to Infection, colds, coughs, or flu? </label>
          <div class="col-sm-4">
            <input id="group1A" [(ngModel)]="group1A" name="group1A" type="text" class="form-control" placeholder="">
          </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-8 col-form-label" for="group1B">Do you have inflammation, Heat spots ? </label>
        <div class="col-sm-4">
          <input id="group1B" [(ngModel)]="group1B" name="group1B" type="text" class="form-control" placeholder="">
        </div>
      </div>          
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="border:1px solid black;">
        <div class="form-inline">
        ......
    </div>
</div>

＆＃13;

选择一下bootstrap 4 docs

https://getbootstrap.com/docs/4.0/components/forms/

Answer 3

我认为你错过了输入元素上的“mr-screensize-marginsize”（边缘右边）类（即：mr-md-5） - 请参阅https://v4-alpha.getbootstrap.com/utilities/spacing/

<input id="group1A" [(ngmodel)]="group1A" name="group1A" style="width: 5px;" type="text" class="form-control mr-md-5 mr-sm-5 mr-lg-5" placeholder="">

Answer 4

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="border:1px solid black;">
      <div class="form-group row">
        <label class="col-sm-12 col-form-label">1. First question ? <input id="group1A" [(ngModel)]="group1A" name="group1A" type="text" class="form-control" style="width:50px; display:initial !important;" placeholder=""></label>
      </div>
      <div class="form-group row">
        <label class="col-sm-12 col-form-label" for="group1B">Second question ? <input id="group1B" [(ngModel)]="group1B" name="group1B" type="text" class="form-control" style="width:50px; display:initial !important;" placeholder=""></label>
      </div>          
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="border:1px solid black;">
        <div class="form-inline">
        ......
    </div>
</div>

Bootstrap 4 - 需要有2列水平/内联形式

4 个答案: