- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
您好,当涉及到 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+"°"+weather.units.temp+"</h2>";
html += "<p>"+weather.city+", "+weather.region+"</p>";
html += "<p"+weather.currently+"</p>";
html += "<p>"+weather.alt.temp+"°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>
最佳答案
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+'°'+weather.units.temp+'</h2>';
html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
html += '<li class="currently">'+weather.currently+'</li>';
html += '<li>'+weather.alt.temp+'°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>
关于javascript - Bootstrap well 类输出屏幕外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42367121/
我正在使用 OUTFILE 命令,但由于权限问题和安全风险,我想将 shell 的输出转储到文件中,但出现了一些错误。我试过的 #This is a simple shell to connect t
我刚刚开始学习 Java,我想克服在尝试为这个“问题”创建 Java 程序时出现的障碍。这是我必须创建一个程序来解决的问题: Tandy 喜欢分发糖果,但只有 n 颗糖果。对于她给第 i 个糖果的人,
你好,我想知道我是否可以得到一些帮助来解决我在 C++ 中打印出 vector 内容的问题 我试图以特定顺序在一个或两个函数调用中输出一个类的所有变量。但是我在遍历 vector 时收到一个奇怪的错误
我正在将 intellij (2019.1.1) 用于 java gradle (5.4.1) 项目,并使用 lombok (1.18.6) 来自动生成代码。 Intellij 将生成的源放在 out
编辑:在与 guest271314 交流后,我意识到问题的措辞(在我的问题正文中)可能具有误导性。我保留了旧版本并更好地改写了新版本 背景: 从远程服务器获取 JSON 时,响应 header 包含一
我的问题可能有点令人困惑。我遇到的问题是我正在使用来自 Java 的 StoredProcedureCall 调用过程,例如: StoredProcedureCall call = new Store
在我使用的一些IDL中,我注意到在方法中标记返回值有2个约定-[in, out]和[out, retval]。 当存在多个返回值时,似乎使用了[in, out],例如: HRESULT MyMetho
当我查看 gar -h 的帮助输出时,它告诉我: [...] gar: supported targets: elf64-x86-64 elf32-i386 a.out-i386-linux [...
我想循环遍历一个列表,并以 HTML 格式打印其中的一部分,以代码格式打印其中的一部分。所以更准确地说:我想产生与这相同的输出 1 is a great number 2 is a great
我有下面的tekton管道,并尝试在Google Cloud上运行。集群角色绑定。集群角色。该服务帐户具有以下权限。。例外。不确定需要为服务帐户设置什么权限。
当尝试从 make 过滤非常长的输出以获取特定警告或错误消息时,第一个想法是这样的: $ make | grep -i 'warning: someone set up us the bomb' 然而
我正在创建一个抽象工具类,该类对另一组外部类(不受我控制)进行操作。外部类在某些接口(interface)点概念上相似,但访问它们相似属性的语法不同。它们还具有不同的语法来应用工具操作的结果。我创建了
这个问题已经有答案了: What do numbers starting with 0 mean in python? (9 个回答) 已关闭 7 年前。 在我的代码中使用按位与运算符 (&) 时,我
我写了这段代码来解析输入文件中的行输入格式:电影 ID 可以有多个条目,所以我们应该计算平均值输出:**没有重复(这是问题所在) import re f = open("ratings2.txt",
我需要处理超过 1000 万个光谱数据集。数据结构如下:大约有 1000 个 .fits(.fits 是某种数据存储格式)文件,每个文件包含大约 600-1000 个光谱,其中每个光谱中有大约 450
我编写了一个简单的 C 程序,它读取一个文件并生成一个包含每个单词及其出现频率的表格。 该程序有效,我已经能够在 Linux 上运行的终端中获得显示的输出,但是,我不确定如何获得生成的显示以生成包含词
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
1.普通的输出: print(str)#str是任意一个字符串,数字··· 2.格式化输出: ?
我无法让 logstash 正常工作。 Basic logstash Example作品。但后来我与 Advanced Pipeline Example 作斗争.也许这也可能是 Elasticsear
这是我想要做的: 我想让用户给我的程序一些声音数据(通过麦克风输入),然后保持 250 毫秒,然后通过扬声器输出。 我已经使用 Java Sound API 做到了这一点。问题是它有点慢。从发出声音到
我是一名优秀的程序员,十分优秀!