内联表格 bootstrap 3

Question

如何内联这两个字段。假设 textarea 是 8col 并且输入字段是 4col .
这是 fiddle : Demo

我想在右侧添加标签到左侧。

   <div class="form-inline">
            <div class="form-group">
                <label class="" for="address">آدرس مکاتباتی:</label>
                <textarea class="" cols="63" rows="3"></textarea>
            </div>
                <label>
                    پلاک:
                </label>
                <input type="text" placeholder="پلاک" ng-model="Address.IdentifierLeft" name="pelak" valid-number required />

    </div>

非常感谢

Answer 1

只需将标签放在文本区域和输入字段之后。

FIDDLE

HTML:

<div class="form-inline">
    <div class="form-group">
        <textarea class="" cols="63" rows="3"></textarea>
        <label class="" for="address">:آدرس مکاتباتی</label>
    </div>
        <input type="text" placeholder="پلاک" ng-model="Address.IdentifierLeft" name="pelak" valid-number required />
    <label>
            پلاک:
        </label>
</div>

Answer 2

首先，对于从右到左的支持，无需更改代码的方向，只需将 Bootstrap RTL 包含到您的页面中即可。您的表单应如下所示：

<div class="form-inline">
        <div class="form-group">
            <div class="row">
                <div class="col-md-8"> 
                     <label class="" for="address">آدرس مکاتباتی:</label> 
                     <textarea class="" cols="63" rows="3"></textarea>
                </div>
            </div>
        </div>

           <div class="form-group">
            <div class="row">
                <div class="col-md-4"> 
                    <label>پلاک: </label>
                     <input type="text" placeholder="پلاک" ng-model="Address.IdentifierLeft" name="pelak" valid-number required />
                </div>
            </div>
        </div>



</div>

内联表格 bootstrap 3

inline form bootstrap 3

html

twitter-bootstrap