javascript - Bootstrap井类输出在屏幕外

Question

您好，我在 Bootstrap 中遇到输出问题。有时，主标题和井输出会离开屏幕。当用户在问题区域中输入某些内容时，他会收到响应，并且该响应井类会在移动 View 中从屏幕上消失。以及标题 1 文本:

Hello I am ZENYATTA!

ZENYATTA 文本被剪切。有什么方法可以使输入字段、输出字段和标题大小相同？

https://puu.sh/ud5C9/8eae3caf7a.JPG

let questions = [
  {text:'What is your name?', audio:'music/openmind.ogg', response : input => 'Hello ' + input + '!' },
  {text:'How old are you?', response : input => 'That means you were born in ' + (2017 - input) + '.'},
  {text:'Where are you from?', audio:'music/beone.ogg', response: input => 'You are from ' + (input) + '.'},
  {text: 'Do you eat healthy?', audio: 'music/becoming.ogg', response: input => 'Acording to my data you are eating ' + (input) + ' and that is healthy!'},
  {text: 'What is your time?', audio: 'music/becoming.ogg', response: input => 'Where I am located' + (new Date().toLocaleTimeString()) + 'that is the day!'},
  {text: 'What language do you speak', audio: 'music/becoming.ogg', response: input => 'Acording to me you speak: ' + language() + '!'},
  {text: 'Your current location?', audio: 'music/becoming.ogg', response: input => 'You are located:' + (document.getElementById('address').innerHTML) + '!'},
  {text: 'You know you ip adress?', audio: 'music/becoming.ogg', response: input => 'You ip adress is:' + (document.getElementById('ip').innerHTML) + '!'},
  {text: 'How many hours is it left until 0:00?', audio: 'music/becoming.ogg', response: input => 'Left:' + (document.getElementById('count').innerHTML) + '!'},
{text: 'Current weather in Karlshamn?', audio: 'music/becoming.ogg', response: input => (document.getElementById('weather').innerHTML)}


 ];
 let ipinfoResponse;
 $.get("http://ipinfo.io", function (response) {
  ipinfoResponse = response;
}, "jsonp");

let output = $('#output'),
    input = $("#input"),
    curQuestion;

function ask() {
  let qi = Math.floor(Math.random() *  questions.length); //depending on your needs, a check could be added if it's been asked directly before or only recycle questions when all are asked
  curQuestion = questions[qi];
  setOutput(curQuestion.text);
  input.val('');
}

ask(); //first call

function respond(){
  let q = curQuestion;
  if(q.audio)
    new Audio(q.audio).play();
  setOutput(q.response(input.val()));
  setTimeout(ask, 5000);
}

function setOutput(txt){
  output.html($('<h1>').html(txt));
}


$(document).keypress(function(e) {
  if (e.which == 13) {
    respond();
    return false;
  }
});

function language () {
  var userLang = navigator.language || navigator.userLanguage;
  return userLang
}
//location
$.get("http://ipinfo.io", function (response) {
    $("#ip").html("IP: " + response.ip);
    $("#address").html("Location: " + response.city + ", " + response.region);
    $("#details").html(JSON.stringify(response, null, 4));
}, "jsonp");


//timer
setInterval(function time(){
  var d = new Date();
  var hours = 24 - d.getHours();
  var min = 60 - d.getMinutes();
  if((min + '').length == 1){
    min = '0' + min;
  }
  var sec = 60 - d.getSeconds();
  if((sec + '').length == 1){
        sec = '0' + sec;
  }
  jQuery('#count').html(hours+':'+min+':'+sec)
}, 1000);

//weather
if ("geolocation" in navigator) {
  $('.js-geolocation').show();
} else {
  $('.js-geolocation').hide();
}


$(document).ready(function() {
  loadWeather('Karlshamn',''); //paramiter.
});

function loadWeather(location, woeid) {
  $.simpleWeather({
    location: location,
    woeid: woeid,
    unit: 'c',
    success: function(weather) {
      html = "<h2><i class='icon-"+weather.code+"'></i> "+weather.temp+"&deg;"+weather.units.temp+"</h2>";
      html += "<p>"+weather.city+", "+weather.region+"</p>";
      html += "<p"+weather.currently+"</p>";
      html += "<p>"+weather.alt.temp+"&deg;F</p>";

      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
}

body {
	background-color: #8dd8f8;
}

h1, p {

	text-align: center;
	color: #323330;
	font-size:  100px;
}

#output{
	max-width: 100%;
}
p {
	font-size: 30px;
}

body {
  padding: 45px 25px;
  font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background: #1192d3;
}
.hide{
   display:none;
}

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

<div class="container">
     <img src="https://puu.sh/ud5Ub/c3598d2d3a.gif" class="img-responsive center-block" alt="ffc.gif" width="500px" height="500px">
    <h1 class="text-center">Hello I am ZENYATTA!</h1>

<div class="well">
<div id="output"></div>
</div>

    <div class="col-md-2 col-md-offset-5">
			<div class="form-group">
			  <label>Responce:</label>

			  <input type="text" class="form-control" id="input" value="">
			</div>
		</div>


<div class="hide">
    <div id='ip'></div>
    <div id='address'></div>
    <div id="count"></div>
    <div id="weather"></div>
    <button class="js-geolocation" style="display: none;">Use Your Location</button>
</div>

</div>

Answer 1

let questions = [
  {text:'What is your name?', audio:'music/openmind.ogg', response : input => 'Hello ' + input + '!' },
  {text:'How old are you?', response : input => 'That means you were born in ' + (2017 - input) + '.'},
  {text:'Where are you from?', audio:'music/beone.ogg', response: input => 'You are from ' + (input) + '.'},
  {text: 'Do you eat healthy?', audio: 'music/becoming.ogg', response: input => 'Acording to my data you are eating ' + (input) + ' and that is healthy!'},
  {text: 'What is your time?', audio: 'music/becoming.ogg', response: input => 'Where I am located' + (new Date().toLocaleTimeString()) + 'that is the day!'},
  {text: 'What language do you speak', audio: 'music/becoming.ogg', response: input => 'Acording to me you speak: ' + language() + '!'},
  {text: 'Your current location?', audio: 'music/becoming.ogg', response: input => 'You are located:' + (document.getElementById('address').innerHTML) + '!'},
  {text: 'You know you ip adress?', audio: 'music/becoming.ogg', response: input => 'You ip adress is:' + (document.getElementById('ip').innerHTML) + '!'},
  {text: 'How many hours is it left until 0:00?', audio: 'music/becoming.ogg', response: input => 'Left:' + (document.getElementById('count').innerHTML) + '!'},
{text: 'Current weather in Karlshamn?', audio: 'music/becoming.ogg', response: input => (document.getElementById('weather').innerHTML)}


 ];
 let ipinfoResponse;
 $.get("http://ipinfo.io", function (response) {
  ipinfoResponse = response;
}, "jsonp");

let output = $('#output'),
    input = $("#input"),
    curQuestion;

function ask() {
  let qi = Math.floor(Math.random() *  questions.length); //depending on your needs, a check could be added if it's been asked directly before or only recycle questions when all are asked
  curQuestion = questions[qi];
  setOutput(curQuestion.text);
  input.val('');
}

ask(); //first call

function respond(){
  let q = curQuestion;
  if(q.audio)
    new Audio(q.audio).play();
  setOutput(q.response(input.val()));
  setTimeout(ask, 5000);
}

function setOutput(txt){
  output.html($('<h1>').html(txt));
}


$(document).keypress(function(e) {
  if (e.which == 13) {
    respond();
    return false;
  }
});

function language () {
  var userLang = navigator.language || navigator.userLanguage;
  return userLang
}
//location
$.get("http://ipinfo.io", function (response) {
    $("#ip").html("IP: " + response.ip);
    $("#address").html("Location: " + response.city + ", " + response.region);
    $("#details").html(JSON.stringify(response, null, 4));
}, "jsonp");


//timer
setInterval(function time(){
  var d = new Date();
  var hours = 24 - d.getHours();
  var min = 60 - d.getMinutes();
  if((min + '').length == 1){
    min = '0' + min;
  }
  var sec = 60 - d.getSeconds();
  if((sec + '').length == 1){
        sec = '0' + sec;
  }
  jQuery('#count').html(hours+':'+min+':'+sec)
}, 1000);

//weather
if ("geolocation" in navigator) {
  $('.js-geolocation').show();
} else {
  $('.js-geolocation').hide();
}


$(document).ready(function() {
  loadWeather('Seattle',''); //paramiter.
});

function loadWeather(location, woeid) {
  $.simpleWeather({
    location: location,
    woeid: woeid,
    unit: 'f',
    success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      html += '<li>'+weather.alt.temp+'&deg;C</li></ul>';  
      
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
}

body {
	background-color: #8dd8f8;
}

h1, p {

	text-align: center;
	color: #323330;
	font-size:  100px;
}

#output{
	max-width: 100%;
}
p {
	font-size: 30px;
}

body {
  padding: 45px 25px;
  font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background: #1192d3;
}
.hide{
   display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/monkeecreate/jquery.simpleWeather/master/jquery.simpleWeather.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
     <img src="https://puu.sh/ud5Ub/c3598d2d3a.gif" class="img-responsive center-block" alt="ffc.gif" width="500px" height="500px">
    <h1 class="text-center">Hello I am ZENYATTA!</h1>

<div class="well">
<div id="output"></div>
</div>

    <div class="col-md-2 col-md-offset-5">
			<div class="form-group">
			  <label>Responce:</label>

			  <input type="text" class="form-control" id="input" value="">
			</div>
		</div>


<div class="hide">
    <div id='ip'></div>
    <div id='address'></div>
    <div id="count"></div>
    <div id="weather"></div>
    <button class="js-geolocation" style="display: none;">Use Your Location</button>
</div>

</div>