Как организовать два поля ввода с дефисом в начальной загрузке? - PullRequest
Новая
       17

Как организовать два поля ввода с дефисом в начальной загрузке?

0 голосов
/ 11 июля 2019

Я хотел бы иметь два поля ввода с размером 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 Я хотел бы иметь тире, как это -. Можно ли вставить тире? Кроме того, размер полей ввода не является точным. Как установить размер, соответствующий количеству символов в атрибуте размера?

Ответы [ 3 ]

1 голос
/ 11 июля 2019

Вы можете сделать это, используя псевдокласс :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>
1 голос
/ 11 июля 2019

Код HTML: 

<!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>

Код Css: 

.system_id_1{
   width:12% !important;
} 
.system_id_2{
    width:18% !important;
} 
.dash {
    padding-right: 0px !important;
    padding-left: 0px !important;
    width: 2.33% !important;
}

Надеюсь, это вам поможет!

0 голосов
/ 11 июля 2019

Я бы просто исправил определения разметки / плохих 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/

...