Question

我有一个bootstrap输入字段和一个字体很棒的edin图标。目前，图标显示在输入框下方。我想要做的是将它们显示在一行上。可悲的是，尽管这是基本的，但我无法使其发挥作用。我尝试浮动元素，给它们一个内联块和其他东西，这些都没有用。请帮忙：

<div class="col-sm-2">
              <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"><i class="fa fa-pencil" aria-hidden="true"></i>
            </div>

Answer 1

根据引导程序文档（http://getbootstrap.com/css/#forms-inline），您可以使用带有插件的输入组将图标放在插件中：

 runfile('/home/pc/python and kivy/test23.py', wdir='/home/pc/python and kivy')<br/>
 Traceback (most recent call last):<br/>
   File "<stdin>", line 1, in <module><br/>
   File "/usr/lib/python2.7/dist-packages/spyderlib/widgets/externalshell/sitecustomize.py", line 699, in runfile<br/>
     execfile(filename, namespace)<br/>
   File "/usr/lib/python2.7/dist-packages/spyderlib/widgets/externalshell/sitecustomize.py", line 81, in execfile<br/>
     builtins.execfile(filename, *where)<br/>
   File "/home/pc/python and kivy/test23.py", line 42, in <module><br/>
     test23().run()<br/>
   File "/usr/lib/python2.7/dist-packages/kivy/app.py", line 802, in run
     root = self.build()<br/>
   File "/home/pc/python and kivy/test23.py", line 39, in build
     return Builder.load_string(kv)<br/>
   File "/usr/lib/python2.7/dist-packages/kivy/lang.py", line 1921, in load_string<br/>
     self._apply_rule(widget, parser.root, parser.root)<br/>
   File "/usr/lib/python2.7/dist-packages/kivy/lang.py", line 2130, in _apply_rule
     e), cause=tb)<br/>
 kivy.lang.BuilderException: Parser: File "<inline>", line 3:
 ..<br/>
       1:<br/>
       2:ScreenManagement:<br/>
 >>    3:    transition: FadeTransition()<br/>
       4:    screen1:<br/>
       5:    screen2:<br/>
 ..<br/>
 BuilderException: Parser: File "<inline>", line 3:
 ..<br/>
       1:<br/>
       2:ScreenManagement:<br/>
 >>    3:    transition: FadeTransition()<br/>
       4:    screen1:<br/>
       5:    screen2:<br/>
 ..<br/>
 NameError: name 'FadeTransition' is not defined<br/>
   File "/usr/lib/python2.7/dist-packages/kivy/lang.py", line 1742, in create_handler<br/>
     return eval(value, idmap), bound_list<br/>
   File "<string>", line 3, in <module><br/><br/>

   File "/usr/lib/python2.7/dist-packages/kivy/lang.py", line 2115, in _apply_rule
     rctx['ids'])<br/>
   File "/usr/lib/python2.7/dist-packages/kivy/lang.py", line 1747, in create_handler
     cause=tb)<br/>

Answer 2

您应该在容器上尝试cd /path/to/files ~/bin/tar-by-dates.sh *并display: flex;标记＆amp;仅<i>上的align-self: center;。

这是一个例子：

＆＃13;

<i>

＆＃13;

.col-sm-2 {
  display: flex;
}

.col-sm-2 > i {
  display: flex;
  align-self: center;
  width: 30px;
}

＆＃13;

Fiddle demo

Answer 3

我有一个简单的css解决方案。首先在列中添加一个新类。

HTML =＆GT;＆GT;＆GT;

<div class="col-sm-2 myForm">
     <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"><i class="fa fa-pencil" aria-hidden="true"></i>
</div>

CSS =＆GT;＆GT;＆GT;

.myForm .form-control{
     float:left;
     width:calc(100% - 35px);
}
.myForm .fa{
     float:right;
     width:30px;
 }

试试这个...... 这是jsfiddle

上的现场演示

更好的解决方案是bootstrap form css。点击此链接： http://getbootstrap.com/css/#forms

在一行上显示两个元素

3 个答案: