Question

我在.hbs模板文件的ember应用程序中有以下代码（基本上它只是一个聊天框，供用户输入文本，＆＃34;返回＆＃34;和＆＃34;发送＆＃34;按钮两侧）：

<div class="row">
   <div class="chat-form text-left">
      <button class="btn btn-default" {{action "back"}}>Back</button>
      <form class="form-inline" {{action "handleMessage" on="submit"}}>
         <div class="form-group">
            <label class="sr-only">Chat Message</label>
            {{input value=chatMessage class="form-control"}}
         </div>
         <button type="submit" class="btn btn-default">Send</button>
      </form>
   </div>
</div>

目前文本框太窄了，我想让它宽几倍，我知道引导程序中的列和跨度，但作为一个完整的初学者，我不知道如何正确地做到这一点在这种情况下。

Answer 1

您需要使用引导网格系统。我在这里提供一个例子。

示例代码段

#inpt {
width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
    <div class="row">
       <div class="chat-form text-left col-xs-12">
<div class="col-xs-2">
          <button class="btn btn-default">Back</button>
</div>
<div class="col-xs-10">
          <form class="form-inline">
             <div class="form-group col-xs-9">
                <label class="sr-only">Chat Message</label>

                <input id="inpt" value=chatMessage class="form-control">

             </div>
<div class="col-xs-3">
             <button type="submit" class="btn btn-default">Send</button>
</div>
          </form>
</div>
       </div>
    </div>
    </div>

Bootstrap - 更改表单的宽度

1 个答案: