Question

我正致力于创建论坛/公告板软件。将回复部分添加到主题页面时遇到问题，here是我到目前为止所做的。

HTML：

<div class="panel panel-default">
<div class="panel-body">
    <table>
        <tr>
            <td class="forum-post-heading-container">
                <img src="http://i.imgur.com/YURsw6g.png" class="img-thumbnail avatar-image forum-image">
                <div class="forum-post-header-padding"></div>
                <div class="forum-post-header-author-name"><a href="./?a=profile&u=test">username</a></div>
            </td>
            <td class="forum-post-contents">
                <textarea id="reply-text" class="form-control"></textarea>
            </td>
        </tr>
    </table>
</div>

的CSS：

.forum-post-heading-container{
    padding: 15px;  
}
.forum-image{
    width: 100px;
    height: 100px;  
}
.forum-post-header-padding{
    height: 5px;    
}
.forum-post-header-author-name{
    text-align: center; 
}
.forum-post-contents{
    border-left: 1px solid silver;
    padding: 15px;  
}

#reply-text{
    height: 200px;
    width: 150px;
    resize: none;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box
}

Answer 1

删除.panel-body（panels with tables），在表格中添加.table课程以获得100％宽度，并使用col-*-*设置第二个td宽度：

<div class="panel panel-default">
    <table class="table">
        <tr>
            <td class="forum-post-heading-container">
                <img src="http://i.imgur.com/YURsw6g.png" class="img-thumbnail avatar-image forum-image">
                <div class="forum-post-header-padding"></div>
                <div class="forum-post-header-author-name"><a href="./?a=profile&u=test">username</a></div>
            </td>
            <td class="forum-post-contents col-xs-11">
                <textarea id="reply-text" class="form-control"></textarea>
            </td>
        </tr>
    </table>
</div>

最后，移除width中的#reply-text并在text-align: center中添加.forum-post-heading-container。

Bootstrap 3 - 制作textarea填充表

1 个答案: