Question

我有一个脚本，我想改变和Tag的位置来切换他们的地方（对于我的RTL语言）。我希望标签位于右侧，标签位于表单的左侧。

这是我拥有的：

我想要的是：

以下是一些代码：

<form class="form-horizontal" onsubmit="return false;">
    <fieldset>
    <div id="userIdInputContainer" class="control-group">
            <label class="control-label" for="userId">משתמש</label>
            <div class="controls inline-inputs">
                <select id="userId" name="userId"></select>
                <span class="help-inline"></span>
            </div>
        </div>
        <div id="filterCustomerIdTEInputContainer" class="control-group">
            <label class="control-label" for="filterCustomerIdTE">לקוח</label>
            <div class="controls inline-inputs">
                <select id="filterCustomerIdTE" name="filterCustomerIdTE"></select>
                <span class="help-inline"></span>
            </div>
        </div>
        <div id="projectIdInputContainer" class="control-group">
            <label class="control-label" for="projectId">פרויקט</label>
            <div id="parentProjectIdTE" class="controls inline-inputs">
                <select id="projectId" name="projectId"></select>
                <span class="help-inline"></span>
            </div>
        </div>
        <div id="categoryIdInputContainer" class="control-group">
            <label class="control-label" for="categoryId">סוג עבודה</label>
            <div class="controls inline-inputs">
                <select id="categoryId" name="categoryId"></select>
                <span class="help-inline"></span>
            </div>
        </div>
        <div id="descriptionInputContainer" class="control-group">
            <label class="control-label" for="description">תיאור</label>
            <div class="controls inline-inputs">
                <textarea class="input-xlarge" id="description" rows="3"><#= _.escape(item.get('description') || '') #></textarea>
                <span class="help-inline"></span>
            </div>
        </div>
    </fieldset>
</form>

点击左侧的“הוספתרשומה”蓝色按钮查看表格。

以下是处理表单css参数的 bootstrap.min.css （点击下载）的代码：

.form-horizontal .control-label{float:none;width:auto;padding-top:0;text-align:left}.form-horizontal .controls{margin-left:0}.form-horizontal .control-list{padding-top:0}.form-horizontal .form-actions{padding-right:10px;padding-left:10px}.media .pull-left,.media .pull-right{display:block;float:none;margin-bottom:10px}.media-object{margin-right:0;margin-left:0}.modal{top:10px;right:10px;left:10px}

bootstrap-responsice.min.css 的代码（点击下载）：

.control-label{float:left;width:160px;padding-top:5px;text-align:right}.form-horizontal .controls{*display:inline-block;*padding-left:20px;margin-left:180px;*margin-left:0}.form-horizontal .controls:first-child{*padding-left:180px}.form-horizontal .help-block{margin-bottom:0}.form-horizontal input+.help-block,.form-horizontal select+.help-block,.form-horizontal textarea+.help-block,.form-horizontal .uneditable-input+.help-block,.form-horizontal .input-prepend+.help-block,.form-horizontal .input-append+.help-block{margin-top:10px}.form-horizontal .form-actions{padding-left:180px}table{max-width:100%;background-color:transparent;border-collapse:collapse;border-spacing:0}

我尝试了几种css / html方法来实现它但没有成功。

Answer 1

您可以在.control-label和.inline-inputs类上使用左右浮动，轻松在RTL和LTR模式之间切换。

在这里查看我快速而又脏兮兮的JS小提琴：http://jsfiddle.net/ub07t7ax/

所有这一切都是在向右浮动控件和向左浮动标签之间切换，反之亦然。

当然，您不必在脚本中执行此操作，这只是一个示例。

更新：要在没有JS的情况下使用此功能，只需将rtl类添加到HTML中的字段集即可启用RTL模式。

示例CSS：

.inline-inputs select,
.inline-inputs input,
.inline-inputs textarea {
    box-sizing: border-box;
    width: 100%;
}
.inline-inputs {
    float: right;
    width: 75%;
}

.control-label {
    float: left;
    width: 25%
}

.rtl .inline-inputs {
    float: left;
}

.rtl .control-label {
    float: right;
    text-align: right;
}

更新2：引导！ 要使用引导程序对话框，首先将以下类添加到CSS中：

.rtl .inline-inputs {
    margin-left: 0 !important;
}

.rtl .control-label {
    float: right;
    text-align: right;
}

然后，要以RTL模式显示对话框，请将rtl类添加到显示为对话框的DIV中，例如

<!-- modal edit dialog -->
<div class="modal hide fade rtl" id="timeEntryDetailDialog">
...
</div>

Answer 2

请阅读this。这是用阿拉伯语，希伯来语和其他从右到左脚本创建HTML页面的教程。

Answer 3

如果没有看到你的CSS，我不知道是否还有更多内容，然后简单地重新安排html（在你输入的div之后放置标签），但如果没有，那就应该是那样。以下是jsfiddle的示例。

<div class="block">
    <input type="text" />
    <label>Simple label</label>
</div>
<div class="block">
    <input type="text" />
    <label>Label with more text</label>
</div>
<div class="block">
    <input type="text" />
    <label>Short</label>
</div>

更改标签的位置，然后选择表格列的标签

3 个答案: