Bootstrap Checkbox其他带文本字段的复选框

Question

我是bootstrap的新手，但到目前为止，当我搜索需要“其他人”自定义字段的bootstrap复选框时，没有任何内容出现。我正在使用水平表格控件，因此宽度将是100％，我需要移动使用。

请查看属性类型复选框。我需要一个必须是列宽的其他字段。

我试过

<div class="checkbox">
    <label for="propertytype-8">
        <input type="checkbox" name="propertytype" id="propertytype-8" value="others">
    </label>
        <input id="propertytype_other" name="propertytype_other" type="text" value=""     placeholder="other" class="form-control">
</div>

导致

和

<div class="checkbox">
    <label for="propertytype-8">
        <input type="checkbox" name="propertytype" id="propertytype-8" value="others">
        <input id="propertytype_other" name="propertytype_other" type="text" value=""     placeholder="other" class="form-control">
    </label>
</div>

导致

Answer 1

添加尺码标签

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="checkbox">
    <label for="propertytype-8">
       <input type="checkbox" name="propertytype" id="propertytype-8" value="others">
       <input id="propertytype_other" name="propertytype_other" type="text" value="" placeholder="other" class="form-control" size="1000%">      
   </label>
</div>

Answer 2

这是另一种解决方案：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
    
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
            <label class="form-check-label " for="defaultCheck1"> Default checkbox </label>
            <input class="form-control form-control-sm ml-3 w-50" type="text" placeholder=".form-control-sm" style="display: inline">
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
            <label class="form-check-label" for="defaultCheck2"> Disabled checkbox </label>
        </div>
    
</div>