如何在引导程序中用短划线组织两个输入字段？

时间：2019-07-10 21:30:35

标签： twitter-bootstrap twitter-bootstrap-3

我想要两个大小分别为2和7的输入字段彼此相邻。另外，两个输入字段之间应该有一个破折号。这是到目前为止我所拥有的示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="alert alert-warning">
    <div class="row">
      <div class="col-xs-6">
				<div class="form-group">
					This is some title?
					<label><input type="checkbox" name="valid" /> <strong>Yes</strong></label>
				</div>
				<div class="form-group">
					<label><u>System ID:</u></label>
		  		<div class="row">
		  		  <div class="col-xs-2">
		  			  <input class="form-control input-sm" type="text"  name="system_id_1" value="56" size="2" maxlength="2">
		  			</div>
		  			<div class="col-xs-4">
		  			  <input class="form-control input-sm" type="text" name="system_id_2" value="2345778" size="7" maxlength="7">
		  			</div>
		  		</div>
				</div>
			</div>
      <div class="col-xs-6">
         <div class="form-group">
            <label>Record Number:</label>
            <input class="form-control input-sm" type="text" name="recnum" value="879043512" size="9" maxlength="9" />
         </div>
      </div>
    </div>
  </div>
</div>

在输入字段system_id_1和system_id_2之间，我希望有一个这样的破折号-。是否可以插入破折号？此外，输入字段的大小也不准确。如何设置大小以匹配size属性中的字符数？

3 个答案:

答案 0 :(得分：1)

HTML代码：

ion-grid

Css代码：

<!DOCTYPE html>
<html>
<head>
    <title>Weather-graphic</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="css/my.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body> 
    <div class="container">
        <div class="alert alert-warning">
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        This is some title?
                        <label><input type="checkbox" name="valid" /> <strong>Yes</strong></label>
                    </div>
                    <div class="form-group">
                        <label><u>System ID:</u></label>
                        <div class="row">
                            <div class="col-xs-2 system_id_1">
                                <input class="form-control input-sm" type="text"  name="system_id_1" value="56" size="2" maxlength="2">
                            </div>
                            <div class="col-xs-1 dash">
                                <p>&mdash;</p>
                            </div>
                            <div class="col-xs-4 system_id_2">
                                <input class="form-control input-sm" type="text" name="system_id_2" value="2345778" size="7" maxlength="7">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label>Record Number:</label>
                        <input class="form-control input-sm" type="text" name="recnum" value="879043512" size="9" maxlength="9" />
                    </div>
                </div>
            </div>
        </div>
    </div
</body>
</html>

希望对您有帮助！

答案 1 :(得分：1)

您可以使用伪类:after进行操作。下面是有效的代码段

.dash:after {
  display: block;
  text-align: center;
  font-size: 1.3em;
  position: absolute;
  color: red;
  content: "—";
  top: 0px;
  left: -8px;
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="alert alert-warning">
    <div class="row">
      <div class="col-xs-6">
        <div class="form-group">
          This is some title?
          <label><input type="checkbox" name="valid" /> <strong>Yes</strong></label>
        </div>
        <div class="form-group">
          <label><u>System ID:</u></label>
          <div class="row">
            <div class="col-xs-3">
              <input class="form-control input-sm" type="text" name="system_id_1" value="56" size="2" maxlength="2">
            </div>
            <div class="col-xs-5 dash">
              <input class="form-control input-sm" type="text" name="system_id_2" value="2345778" size="7" maxlength="7">
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="form-group">
          <label>Record Number:</label>
          <input class="form-control input-sm" type="text" name="recnum" value="879043512" size="9" maxlength="9" />
        </div>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

我只解决标记/错误的col-xs-*定义，并否决CSS中的填充问题。这将保持响应能力，并且不会破坏其他所有内容。无论如何，不​​可能根据BS 3.x中的尺寸否决固定宽度：

<div class="container">
   <div class="alert alert-warning">
      <div class="row">
         <div class="col-xs-6">
            <div class="form-group">
               This is some title?
               <label><input type="checkbox" name="valid" /> <strong>Yes</strong></label>
            </div>
            <div class="form-group form-system-id">
               <label><u>System ID:</u></label>
               <div class="row">
                  <div class="col-xs-3">
                     <input class="form-control input-sm" type="text"  name="system_id_1" value="56" size="2" maxlength="2">
                  </div>
                  <div class="col-xs-1 text-center">&ndash;</div>
                  <div class="col-xs-8">
                     <input class="form-control input-sm" type="text" name="system_id_2" value="2345778" size="7" maxlength="7">
                  </div>
               </div>
            </div>
         </div>
         <div class="col-xs-6">
            <div class="form-group">
               <label>Record Number:</label>
               <input class="form-control input-sm" type="text" name="recnum" value="879043512" size="9" maxlength="9" />
            </div>
         </div>
      </div>
   </div>
</div>

.form-system-id [class^="col-xs"] {
  padding-right: 2px;
}
.form-system-id [class^="col-xs-1"],
.form-system-id [class^="col-xs-8"] {
  padding-left: 2px;  
}
.form-system-id [class^="col-xs-1"] {
  padding-top: 3px;
}

摆弄-> http://jsfiddle.net/8h6y7w5s/

相关问题
最新问题