html - 如何在 Bootstrap 中将按钮添加到文本区域？

Question

感谢您查看我的问题!

我在 bootstrap 中尝试做的是添加一个文本区域，其中包含文本编辑器按钮。“粗体”、“斜体”和“附件”应该如下所示:

Mockup

但是我有这个:

My Results so far

我遇到的主要问题是:

• 防止文本区域中的文本位于编辑器按钮下方的热门
• 我需要在按钮中覆盖什么才能获得所需的效果

顺便说一下，我使用的是 Bootstrap 模板/主题，它被称为备注，我正在使用他们的编辑器元素之一:

getbootstrapadmin.com/remark/base/forms/editor-markdown.html

模板/11989202

我到目前为止的 HTML:

<div>

     <div class="md-header btn-toolbar btn-toolbar-btm">
       <div class="btn-group">

       <button class="btn-default btn-sm btn btn-pure" type="button" title="Bold" tabindex="-1" data-provider="bootstrap-markdown" 
       data-handler="bootstrap-markdown-cmdBold" data-hotkey="Ctrl+B"><span class="fa fa-bold">
       </span> </button>

       <button class="btn-default btn-sm btn btn-pure" type="button" title="Italic"
       tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdItalic" 
       data-hotkey="Ctrl+I"><span class="fa fa-italic"></span> </button>

       <button class="btn-default btn-sm btn btn-pure" type="button" title="Heading" tabindex="-1">
       <span class="icon wb-attach-file"></span> </button>
       </div>
      </div>

      <textarea class="form-control" rows="8" placeholder="Type something here..."></textarea>
   </div>

CSS:

 .btn-toolbar-btm{
  position:absolute;
  top:212px;
  margin-left:8px;
  z-index:3;
    }

如果你能以任何方式帮助我，我将不胜感激，你真的会挽救我的工作:/

Answer 1

试试这段代码

<div class="form-group required-field-block">       
        <div class="col-md-12 input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
            <textarea rows="3" size="30" value="" class="form-control" placeholder="Sporočilo"></textarea>  
                <div class="required-icon">
                    <div class="text">*</div>
                </div>
        </div>
    </div>