Question

我对这个措辞不佳的问题表示歉意。我是css和boostrap的新手。我正在写form中以table的意义使用html格式的react。

我能够通过input来调整col-sm-3的宽度，但是这将输入字段推到了最右边。 xxxxxx代表宽度。有什么方法可以将其推到label旁边？

<form name='foo'>
    <div className='row'>
       .... // for Enter Your Address
    </div>
    <div className='row'>
      <div className='col'>
        <label>Enter Your Age</label>
      </div>
      <div className='col col-sm-3'>
        <Field component={InputField} name='age' placeholder='xxxxx' type="text" />
      </div>
    </div>
</form>

来自

Enter your address: xxxxxxxxxxxxxxxxxx
Enter Your Age:                 xxxxxx

收件人

Enter your address: xxxxxxxxxxxxxxxxxx
Enter Your Age:     xxxxxx

Answer 1

我从不将Bootstrap与react配合使用（仅用于简单的html文件）。但是，通过使用Bootstrap逻辑，我使用了最新版本的bootstrap ：（第一种形式表示您所做的事情，第三种形式只是Boostrap inline form sample https://getbootstrap.com/docs/4.3/components/forms/#inline-forms中的代码）。我认为第三种方法是最好的：

<form name='foo'>
  <div>FORM 1</div>
  <div class='row'>
    <div class='col'>
      <label>Enter Your Age</label>
    </div>
    <div class='col col-sm-3'>
      <input class="form-control" name='age' placeholder='xxxxx' type="text"/>
    </div>
  </div>
</form>

<form name='foo'>
  <div>FORM 2</div>
  <div class='row'>
    <div class='col-sm-3'>
      <label for="age2">Enter Your Age</label>
    </div>
    <div class='col col-sm-3'>
      <input id="age2" class="form-control" name='age' placeholder='xxxxx' type="text"/>
    </div>
  </div>
    </form>

<div>FORM 3</div>
<form name='foo' class="form-inline">
  <label class="my-1 mr-2" for="age3">Enter your age</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="age3" placeholder="xxxxxx">
</form>

您将必须对React属性进行匹配。 Here is a picture of the result

在您的代码中，通过将 col 类用于标签的div，您说的是div将占据所有可用空间，并且只保留类< strong> col-sm-3 。这就是您拥有如此大空间的原因。希望对您有帮助。

Answer 2

实际上，您根本不需要col类。下面的代码就足够了。

<form name='foo'>
<div className='row'>
  <div>
    <label>Enter Your Age</label>
  </div>
  <div>
    <Field component={InputField} name='age' placeholder='xxxxx' type="text" />
  </div>
</div>

或者您可以使用如下所示的自定义类

<form name='foo'>
<div className='bar'>
  <div>
    <label>Enter Your Age</label>
  </div>
  <div>
    <Field component={InputField} name='age' placeholder='xxxxx' type="text" />
  </div>
</div>

.bar { 
    display: flex;
    align-items: flex-start;
}

Answer 3

使用此：

<div class='row'>
    <div class='col-sm-3'>
        <label>Enter Your Address</label>
    </div>
    <div class='col'>
        <Field component={InputField} name='age' placeholder='xxxxxxxxxxxxxxx' type="text" />
    </div>
</div>
<div class='row'>
    <div class='col-sm-3'>
        <label>Enter Your Age</label>
    </div>
    <div class='col'>
        <Field component={InputField} name='age' placeholder='xxxxx' type="text" />
    </div>
</div>

boostrap对齐输入字段

3 个答案: