Question

我正在尝试在输入组下添加一个小文本。但这不适用于表单组。

因此在此示例中，我希望帮助文本位于输入下方，而不是位于输入右侧这就是我对输入组https://getbootstrap.com/docs/4.0/components/input-group/

的意思。

这是要在其上播放的jsfiddle链接https://jsfiddle.net/c59hnx8v/

顺便说一句，这只是为了演示。

3.13

Answer 1

这与question here类似，并且存在问题，因为Bootstrap 4输入组是display:flex。

最简单的“修复”是确保help-text的宽度为：100％，并且w-100类可用于此目的。不需要额外的CSS。

  <div class="col">
      <label for="demo">Write your email here:</label>
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
        <div class="input-group-append">
          <span class="input-group-text">@</span>
        </div>
        <small class="w-100">Help text</small>
      </div>
  </div>

https://www.codeply.com/go/MvXabRrm2c

Answer 2

根据您的布局，您只需要使小文本的宽度与其容器相同：

class JobsAddAPIView(generics.CreateAPIView):
        queryset = Jobs.objects.all()
        serializer_class = JobAddSerialzer
        permission_classes = [IsAuthenticated]

class JobAddSerialzer(serializers.ModelSerializer):

    job_users = serializers.PrimaryKeyRelatedField(many=True, read_only=True)

    class Meta:
        model = Jobs
        fields = [  
            'job_name', 
            'job_number',
            'job_description',
            'job_start_date',
            'job_start_time',
            'job_end_date',
            'job_end_time',
            'job_group',
            'job_users',
            'job_status',
        ]

class Jobs(models.Model):
    job_company = models.ForeignKey(Company, on_delete=models.CASCADE)
    job_group = models.ForeignKey(Groups, on_delete=models.CASCADE)
    job_users = models.ManyToManyField(User,related_name='job_users', blank=True)
    job_name = models.CharField(max_length=30)
    job_number = models.CharField(max_length=30)
    job_description = models.CharField(max_length=100, blank=True, null=True)
    job_start_date = models.DateField(blank=True, null=True)
    job_start_time = models.TimeField(blank=True, null=True)
    job_end_date = models.DateField(blank=True, null=True)
    job_end_time = models.TimeField(blank=True, null=True)
    job_created_on = models.DateTimeField(auto_now_add=True)
    job_created_by = models.ForeignKey(User, on_delete=models.CASCADE, related_name='job_created_bys')
    job_updated_on = models.DateTimeField(auto_now=True)
    job_updated_by = models.ForeignKey(User, on_delete=models.CASCADE, related_name='job_updated_bys')
    job_is_deleted = models.BooleanField(default=False)
    job_deleted_at = models.DateTimeField(blank=True, null=True)

Answer 3

尝试@Zim答案后，我发现它从附加内容中删除了半径，以下内容对我更正了...

    <div class="col mb-2">
        <label for="demo">Write your email here:</label>
        <div class="input-group ">
            <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
            <div class="input-group-append">
                <span class="input-group-text">@</span>
            </div>
        </div>
        <small class="w-100">Help text</small>
    </div>

如何在输入组下添加小文本？

3 个答案: