引導板面板左右

Question

我想左右創建面板主體引導程序

這是我的代碼

<div class="panel-body">
    <p>1. Fill Full Name</p>
    <p>&nbsp;&nbsp;&nbsp; Example</p>
    <label for="name" class="col-sm-1 control-label">Full Name<span class="important">*</span></label>

    <div class="col-sm-3">
        <input type="text" class="form-control" id="name" name="name" size="40" maxlength="50" disabled="disabled"
            value="Full Name" required>
        <div class="help-block with-errors"></div>
    </div>
</div>
<!-- Phone Ext -->
<div class="panel-body">
    <p>2. Fill Phone Extention</p>
    <p>&nbsp;&nbsp;&nbsp; Extention</p>
    <label for="name" class="col-sm-1 control-label">Phone Extention<span class="important">*</span></label>

    <div class="col-sm-3">
        <input type="text" class="form-control" id="name" name="name" size="40" maxlength="50" disabled="disabled"
                value="Phone Extention" required>
        <div class="help-block with-errors"></div>
    </div>
</div>

和數字3我想要它在右側

非常感謝你的幫助

Answer 1

您可以像這樣拆分列：

<div class="panel-body">
    <div class="col-md-6">
        <p>1. Fill Full Name</p>
        <p>&nbsp;&nbsp;&nbsp; Example</p>
        <label for="name" class="col-sm-2 control-label">Full Name<span class="important">*</span></label>

        <div class="col-sm-6">
            <input type="text" class="form-control" id="name" name="name" size="40" maxlength="50" disabled="disabled"
                value="Full Name" required>
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="col-md-6">
        <p>3. Title #3</p>
        <p>&nbsp;&nbsp;&nbsp; Content for #3</p>
        <label for="name" class="col-sm-2 control-label">Label #3<span class="important">*</span></label>

        <div class="col-sm-6">
            <input type="text" class="form-control" id="name" name="name" size="40" maxlength="50" disabled="disabled"
                value="Label #3" required>
            <div class="help-block with-errors"></div>
        </div>
    </div>
</div>
<!-- Phone Ext -->
<div class="panel-body">
    <p>2. Fill Phone Extention</p>
    <p>&nbsp;&nbsp;&nbsp; Extention</p>
    <label for="name" class="col-sm-1 control-label">Phone Extention<span class="important">*</span></label>

    <div class="col-sm-3">
        <input type="text" class="form-control" id="name" name="name" size="40" maxlength="50" disabled="disabled"
                value="Phone Extention" required>
        <div class="help-block with-errors"></div>
    </div>
</div>