Question

我正在尝试创建一个粘贴在div底部的表单，该表单显示“常规”和“编程”。

以下是图片： Heres a picture

我尝试了很多事情，但似乎无法使表格显示出来...当我确实出现了某物时，我也无法使其停留在底部。有人可以帮忙吗？

我正在使用引导程序

这里是我的HTML：

<div class="chatroom">
  <div id="contain">
    <div id="channels">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action active">General</a>
        <a href="#" class="list-group-item list-group-item-action">Programming</a>
      </div>
       <div id="bar"></div>
       <form id="create-channel">
          <div class="form-group">
            <input type="text" id="c" class="form-control" autocomplete="off"></div>
        </form>
    </div>
    <div id="chat">
      <ul id="messages">
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
      </ul>
      <div class="input">
        <form>
            <div class="form-group">
              <input type="text" id="m" class="form-control" autocomplete="off"></div>
        </form>
      </div>
    </div>
  </div>
</div>

和CSS：

body {
  background-color: azure;
  background: url(../images/background.jpg) no-repeat center center fixed;
  -webkit-background-size:cover;
  background-size:cover;
}

.chatroom {
  width: 90vw;
  height: 80vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;

  border: 2px solid white;
  border-radius: 30px;
  background-color: white;
  opacity:.8;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  flex-direction: column;

}
.input {
  height: 40px;
  width: 98%;
  margin-left:1%;
  margin-top: auto;
}

#chat .form-control{
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}

#chat{
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  float: right;
  height:100%;
  width: 75%;
  display: flex;
  flex-direction: column;
}
#channels{
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  background-color: white;
  width:25%;
  float: left;
  height:100%;
  overflow-y: hidden;
}
#bar{
  background-color:black;
  height:100%;
  float: right;
  width: 3px;
}
#contain{
  height:100%;
}
.list-group{
  font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
  font-size:20px;
  width:calc(100% - 3px);
  background-color:#bcbcbc;
  float:left;
  display:inline-block;
}

Answer 1

当我在表格下方重新排列bar div时，效果很好。在这里检查：https://jsfiddle.net/vj2fyuLm/

  <form id="create-channel">
    <div class="form-group">
      <input type="text" id="c" class="form-control" placeholder="one" autocomplete="off"></div>
  </form>
  <div id="bar"></div>

更新

您可以将整个表单放在列表组中，例如：https://jsfiddle.net/vj2fyuLm/3/

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">General</a>
    <a href="#" class="list-group-item list-group-item-action">Programming</a>

         <form id="create-channel">
      <div class="form-group">
        <input type="text" id="c" class="form-control" placeholder="one" autocomplete="off"></div>
    </form>
  </div>

Answer 2

可以删除ID为#bar的div吗？似乎通过将其向右浮动，您可以获得一些布局功能。

通过删除该字段，将显示表单字段，然后可以根据需要设置其样式：

http://jsfiddle.net/20nhLz3x/4/

似乎无法让表格出现在div中？

2 个答案: