Question

我正在使用引导网格系统，我试图找出如何在输入框（右侧右侧）后面放置一个红色星号，间距不大。要将输入框显示为必需。

我无法弄清楚bootstraps gird系统这样做。我已经尝试将它作为标签，但它把它放在首位。作为一个跨度，它把它放在下面。我怎样才能把它放在输入后面？

    <div id="propertyidsearch">
        <div class="col-lg-3 required">
            <input type="text" name="searchValue" maxlength="2000" size="40" value="" class="form-control input-sm">
        </div>
        <div class="col-lg-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="name" name="name">OWNER NAME</button>
        </div>
        <div class="col-lg-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="location" name="location">PROPERTY ADDRESS</button>
        </div>
        <div class="col-lg-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="billingAddress" name="billingAddress">BILLING ADDRESS</button>
        </div>
    </div>

.required:after{
  content:"*";
  color:red;
}

Answer 1

在Twitter Bootstrap中，网格系统不仅对页面的整个宽度工作一次，而且在单个col块内也是如此，即。一旦你定义col-lg-3，你就会在该区块内增加12个col块，将空间分成12个较小的部分。无论您喜欢哪种方式使用它，即分为8-4（如下例所示 - 我建议在完整页面视图中打开代码段）或其他任何方式，只需确保它总共12个。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div id="propertyidsearch">
        <div class="col-lg-3">
        	<div class="col-lg-8">
            	<input type="text" name="searchValue" maxlength="2000" size="40" value="" class="form-control input-sm">
          	</div>
        	<div class="col-lg-4">
            	<span style="color:red;">*</span>
          	</div>
        </div>
        <div class="col-lg-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="name" name="name">OWNER NAME</button>
        </div>
        <div class="col-lg-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="location" name="location">PROPERTY ADDRESS</button>
        </div>
        <div class="col-lg-3">
            <button type="button" class="btn-u btn-default margin-bottom-10" id="billingAddress" name="billingAddress">BILLING ADDRESS</button>
        </div>
    </div>

＆＃13;

您可以在此处播放：http://www.bootply.com/eV4qRJT14V

Bootstrap在输入文本框旁边放置星号

1 个答案: