Question

所以我使用的是bootstrap4。我正试图在另外两张卡片的左边放一张卡片，最左边的卡片的长度设置为另外两张卡片的总长度....但我可以'弄清楚如何做到这一点。

<div class="card w-20">
    <blockquote class="blockquote card-body">
        <p>This card on the left of the other two cards, with a fixed height and scrolling.</p>
        <footer class="blockquote-footer">
            <small class="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
            </small>
        </footer>
    </blockquote>
</div>
<div class="card w-75">
    <div class="card-body">
        <h5 class="card-title">How do you want to ask the question?</h5>
        <p class="card-text">Enter the information below.</p>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">Description</span>
            </div>
            <textarea class="form-control" aria-label="With textarea"></textarea>
        </div>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">Supplemental Methods</span>
            </div>
            <button type="button" class="btn btn-outline-dark m-3">Text</button>
            <button type="button" class="btn btn-outline-dark m-3">Audio</button>
            <button type="button" class="btn btn-outline-dark m-3">Video</button>
            <button type="button" class="btn btn-outline-dark m-3">Image</button>						 
        </div>
        <button type="button" class="btn btn-outline-dark m-3 float-right">Next</button>						 
    </div>
</div>
<div class="card w-75">
    <div class="card-body">
        <h5 class="card-title">How should students ask the question?</h5>
        <p class="card-text">Enter the information below.</p>
        <div class="input-group text-center">
            <button type="button" class="btn btn-outline-dark m-3">Audio</button>
            <button type="button" class="btn btn-outline-dark m-3">Video</button>
            <button type="button" class="btn btn-outline-dark m-3">Short Answer</button>
            <button type="button" class="btn btn-outline-dark m-3">Sorting</button>						 
        </div>
        <div class="input-group mx-auto">
            <button type="button" class="btn btn-outline-dark m-3">T/F</button>
            <button type="button" class="btn btn-outline-dark m-3">Matching</button>
            <button type="button" class="btn btn-outline-dark m-3">Label</button>
            <button type="button" class="btn btn-outline-dark m-3">Multiple Choice</button>						 
        </div>
        <button type="button" class="btn btn-outline-dark m-3 float-right">Next</button>					
    </div>
</div>

Answer 1

对于这种布局，您应该使用网格，而不是实用程序类：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col col-md-3">
            <div class="card h-100">
                <p class="card-body">This card on the left of the other two cards, with a fixed height and scrolling.</p>
            </div>
        </div>
        <div class="col col-md-9">
            <div class="card">
                <p class="card-body">How do you want to ask the question?<p>
            </div>
            <div class="card">
                <p class="card-body">How should students ask the question?</p>
            </div>
        </div>
    </div>
</div>

Bootstrap4：并排放置卡片？

1 个答案: