Question

我正在为自助服务终端/图腾机创建一个屏幕，我需要使用大字体。

使用带有字体真棒图标和对齐的输入组时出现问题。

当我使用大字体时，我不得不添加'margin-top：10px'来将输入与标签对齐。副作用是令人敬畏的图标在顶部变得不对齐。

//标记

<div class="container">
   <div class="row">
      <div class="col-sm-12">
            <div class="col-sm-12 form-container">
               <form class="form form-horizontal" name="regForm" autocomplete="false" novalidate="" role="form">
                  <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                        <div class="col-sm-12">
                           <div class="row">
                              <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                                 <div class="form-group">
                                    <label class="col-sm-2 control-label">Nome</label>
                                    <div class="col-sm-10 recuo">
                                       <div class="input-group">
                                          <span class="input-group-addon">
                                          <i class="fa fa-user fa-2x bg-info"></i>
                                          </span>
                                          <input take-focus="" type="text" class="form-control input-lg" name="user_name" required="" placeholder="Digite seu nome">
                                       </div>

                                    </div>
                                 </div>
                              </div>
                    </div>
                </div>
 </div>

// CSS

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌lic,400italic,500,500italic,700,700italic,900italic,900);
html, html * {
  font-family: Roboto;
}

form label {
    font-size: 28px !important;
}


form input, form textarea, form select {
    margin-top:10px;
    font-family: Roboto;
    font-weight: bold;
}

.recuo{
  padding-left:30px;
}

.fonte_big {
    font-size: 28px !important;
}



.form-container {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px;
  margin-top:50px;
}

Answer 1

添加

.input-lg {
  margin: 0 !important;
}

应解决问题。

如何使用带有引导程序和大字体的字体真棒图标

1 个答案: