Question

我使用主题Pixeladmin（http://wrapbootstrap.com/preview/WB07403R9）

正如您在此图片中看到的那样：

我的文本框远离我的标签，我希望它更近，所以我想知道我该怎么做？

这是我的代码：

<div class="row form-group">
                        <label class="col-sm-2 control-label">Author:</label>
                        <div class="col-sm-10">
                            <input type="text" name="author" id="author" placeholder="Author Name" class="form-control">
                        </div>
                    </div>

注意您可以在预览网站上查看css源，我感谢所有的帮助。

Answer 1

因为您正在使用引导列并且可能希望保持列的顺畅，我建议使用以下两种方法中的一种：使左侧col宽度为1或将左侧列文本对齐，如下所示。

如果您不想使用此列，则可以执行以下操作

.labelLeft {
    display: inline-block;
    width: 65px;
    float:left;
}
.divLeft {
    display: inline-block;
    float:left;
    width: calc(100% - 65px);
}

<div class="form-group">
    <label class="control-label labelLeft">Author:</label>
    <div class="divLeft">
        <input type="text" name="author" id="author" placeholder="Author Name" class="form-control"/>
    </div>
</div>

＆＃13;

.labelLeft {
    display: inline-block;
    width: 65px;
    float:left;
}
.divLeft {
    display: inline-block;
    float:left;
    width: calc(100% - 65px);
}

＆＃13;

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row form-group"> <!-- original -->
    <label class="col-sm-2 control-label">Author:</label>
    <div class="col-sm-10">
        <input type="text" name="author" id="author" placeholder="Author Name" class="form-control"/>
    </div>
</div>
<br/><br/>
<div class="row form-group"> <!-- bootstrap column size 1 -->
    <label class="col-sm-1 control-label">Author:</label>
    <div class="col-sm-11">
        <input type="text" name="author" id="author" placeholder="Author Name" class="form-control"/>
    </div>
</div>
<br/>
<br/>
<div class="row form-group"> <!-- aligning text to the right -->
    <label class="col-sm-2 control-label text-right">Author:</label>
    <div class="col-sm-10">
        <input type="text" name="author" id="author" placeholder="Author Name" class="form-control"/>
    </div>
</div>
<br/><br/>
<div class="form-group"> <!-- not using bootstrap grid, fixing width of the label -->
    <label class="control-label labelLeft">Author:</label>
    <div class="divLeft">
        <input type="text" name="author" id="author" placeholder="Author Name" class="form-control"/>
    </div>
</div>

＆＃13;

Answer 2

以下是一个新的css3功能示例：calc方法。

优点是标签的绝对宽度。输入将占用给定空间的其余部分。 HTML：

<div class="form-group">
    <label class="control-label pull-left">Author:</label>
    <input type="text" name="author" id="author" placeholder="Author Name" class="form-control pull-left">
</div>

的CSS：

label {
    width: 100px;
    padding: 7px;
}

#author {
    width: calc(100% - 100px);
    min-width: 200px;
}

http://jsfiddle.net/qakxpe35/

如何使文本框靠近文本标签

2 个答案: