我正在做一个标签+表格如下:
<Form horizontal>
<FormGroup>
<Col xs={5} className="xxx">
<ControlLabel>
somekey:
</ControlLabel>
</Col>
<Col xs={7} className="yyy">
<InputGroup>
<FormControl value="v"/>
<InputGroup.Button>
<Button>
km
</Button>
</InputGroup.Button>
</InputGroup>
</Col>
</FormGroup>
</Form>
但是，在我添加了 background-color 之后，ControlLabel 部分的高度似乎与 InputGroup 部分不同如附图所示。我做错了什么吗？
最佳答案
我不认为你在做什么，这就是 bootstrap 的工作方式，
React bootstrap 使用版本 bootstrap v3，
我已经使用纯 HTML、CSS 和 bootstrap v3 CSS 复制了您的代码示例。
以全屏模式打开代码段
在下面的示例中，您可以看到，绿色背景色指示的标签下方有一些空间
Horizontal forms should never be used on small devices. i.e. You should use sm instead of xs so that on small screen it becomes vertical form for good UX.
.column-color {
background-color: red;
}
.form-group-color {
background-color: green;
}
.form-horizontal.centered .control-label {
margin: 0;
padding: 0;
vertical-align: middle;
line-height: 34px;
}
.centered-flex {
display: flex;
}
.centered-flex .control-label {
display: block;
flex: 1;
width: 140px;
padding-right: 10px;
}
.centered-flex .input-group {
flex: 5;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
<div class="form-group form-group-color">
<div class="col-xs-2 text-right column-color">
<label for="inputEmail3" class="control-label ">Email</label>
</div>
<div class="col-xs-10">
<div class="input-group">
<input type="text" class="form-control" placeholder="Test" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">km</span>
</div>
</div>
</div>
</form>
<br/>
<p>Horizontal forms should never be used on small devices. i.e. You should use sm instead of xs, so that on small screen it becomes vertical form</p>
<form class="form-horizontal ">
<div class="form-group form-group-color">
<div class=" col-sm-2 text-right column-color">
<label for="inputEmail3" class="control-label ">Email</label>
</div>
<div class="col-sm-10">
<div class="input-group">
<input type="text" class="form-control" placeholder="Test" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">km</span>
</div>
</div>
</div>
</form>
<br/>
<p>Vertically Centered using line-height method</p>
<form class="form-horizontal centered">
<div class="form-group form-group-color">
<div class=" col-sm-2 text-right column-color">
<label for="inputEmail3" class="control-label ">Email</label>
</div>
<div class="col-sm-10">
<div class="input-group">
<input type="text" class="form-control" placeholder="Test" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">km</span>
</div>
</div>
</div>
</form>
<p>Centered using flex</p>
<form class="form-horizontal ">
<div class="form-group form-group-color centered-flex">
<label for="inputEmail3" class="control-label column-color">Email</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Test" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">km</span>
</div>
</div>
</form>
关于javascript - react-bootstrap 中 FormControl 和 ControlLabel 之间的高度不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51777263/
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee
我正在检查一个Rails项目。在ERubyHTML模板页面上，我看到了这样几行:我不明白为什么不这样写:在这种情况下，||=和ifnil?有什么区别？ 最佳答案 在这种特殊情况下没有区别，但可能是出于习惯。每当我看到nil?被使用时，它几乎总是使用不当。在Ruby中，很少有东西在逻辑上是假的，只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false，因为它具有相同的结果，但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行
📢博客主页：https://blog.csdn.net/weixin_43197380📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正！📢本文由Loewen丶原创，首发于CSDN，转载注明出处🙉📢现在的付出，都会是一种沉淀，只为让你成为更好的人✨文章预览：一.分辨率（Resolution）1、工业相机的分辨率是如何定义的？2、工业相机的分辨率是如何选择的？二.精度（Accuracy）1、像素精度（PixelAccuracy）2、定位精度和重复定位精度（RepeatPrecision）三.公差（Tolerance）四.课后作业（Post-ClassExercises）视觉行业的初学者，甚至是做了1~2年
我基本上来自Java背景并且努力理解Ruby中的模运算。(5%3)(-5%3)(5%-3)(-5%-3)Java中的上述操作产生，2个-22个-2但在Ruby中，相同的表达式会产生21个-1-2.Ruby在逻辑上有多擅长这个？模块操作在Ruby中是如何实现的？如果将同一个操作定义为一个web服务，两个服务如何匹配逻辑。 最佳答案 在Java中，模运算的结果与被除数的符号相同。在Ruby中，它与除数的符号相同。remainder()在Ruby中与被除数的符号相同。您可能还想引用modulooperation.
RSpec似乎按顺序匹配方法接收的消息。我不确定如何使以下代码工作:allow(a).toreceive(:f)expect(a).toreceive(:f).with(2)a.f(1)a.f(2)a.f(3)我问的原因是a.f的一些调用是由我的代码的上层控制的，所以我不能对这些方法调用添加期望。 最佳答案 RSpecspy是测试这种情况的一种方式。要监视一个方法，用allowstub，除了方法名称之外没有任何约束，调用该方法，然后expect确切的方法调用。例如:allow(a).toreceive(:f)a.f(2)a.f(1)
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
由于匿名block和散列block看起来大致相同。我正在玩它。我做了一些严肃的观察，如下所示:{}.class#=>Hash好的，这很酷。空block被视为Hash。print{}.class#=>NilClassputs{}.class#=>NilClass为什么上面的代码和NilClass一样，下面的代码又显示了Hash？puts({}.class)#Hash#=>nilprint({}.class)#Hash=>nil谁能帮我理解上面发生了什么？我完全不同意@Lindydancer的观点你如何解释下面几行:print{}.class#NilClassprint[].class#A
A/ctohttp://wiki.nginx.org/CoreModule#usermaster进程曾经以root用户运行，是否可以以不同的用户运行nginxmaster进程？ 最佳答案 只需以非root身份运行init脚本(即/etc/init.d/nginxstart)，就可以用不同的用户运行nginxmaster进程。如果这真的是你想要做的，你将需要确保日志和pid目录(通常是/var/log/nginx&/var/run/nginx.pid)对该用户是可写的，并且您所有的listen调用都是针对大于1024的端口(因为绑定(