html - Bootstrap 网格布局不起作用

Question

我正在尝试构建我的程序，以便它运行:行:第 3 列，第 3 列，第 3 列。行:第 6 列，第 6 列。但它根本不起作用，我不确定是不是因为 css，因为我检查了多个 Bootstrap 布局，我确定这是正确的。

HTML

        <div class="container-fluid content">
             <div class="row">
                 <div class="col-lg-3">
                    <h4>Select your gender:</h4>
                    <div class="row">
                        <div class="option" "col-lg-6">
                            <input id="male" value="male" name="w" checked="" type="radio" runat="server"/>
                            <label for="male">Male</label>
                        </div>
                        <div class="option" "col-lg-6">
                            <input id="female" value="female" name="w" checked="" type="radio" runat="server"/>
                            <label for="female">Female</label>
                        </div>
                    </div>
                </div>
                 <div class="col-lg-3">
                    <h4>Enter your age:</h4>
                    <asp:TextBox ID="TextBox1" runat="server" placeholder="Years" input type="Number" min="5" required="true"></asp:TextBox>
                </div>
                <div class="col-lg-3">
                    <h4>Enter your bodyweight:</h4>
                    <asp:TextBox ID="TbBodyWeight" runat="server" placeholder="Pounds" input type="Number" min ="50" max ="500" required="true"></asp:TextBox>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <h4>Select your level of daily activity:</h4>
                    <div class="row">
                        <div class="option" "col-3">
                            <input id="Activity1" value="Activity1" name="Activity" checked="" type="radio" runat="server"/>
                            <label for="Activity1">Light: The day is spent mainly sitting down (Driver, desk job).</label>
                        </div>
                        <div class="option" "col-3">
                            <input id="Activity2" value="Activity2" name="Activity" checked="" type="radio" runat="server"/>
                            <label for="Activity2">Moderate: The day is spent mainly on your feet (Teacher, salesman).</label>
                        </div>
                        <div class="option" "col-3">
                            <input id="Activity3" value="Activity3" name="Activity" checked="" type="radio" runat="server"/>
                            <label for="Activity3">Very: The day is spent mainly doing physical activities (Waitress, mailman).</label>
                        </div>
                        <div class="option col-3">
                            <input id="Activity4" value="Activity4" name="Activity" checked="" type="radio" runat="server"/>
                            <label for="Activity4">Extreme: The day is spent mainly doing heavy physical labour (Carpenter, builder).</label>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4>Select the food type you go for the most:</h4>
                    <div class="row">
                        <div class="option">
                            <input id="Food1" value="Food1" name="Food" checked="" type="radio" runat="server"/>
                            <label for="Food1">High Carbs: Candies, cereals.</label>
                        </div>
                        <div class="option">
                            <input id="Food2" value="Food2" name="Food" checked="" type="radio" runat="server"/>
                            <label for="Food2">Moderate Carbs: Tomato soup, broccoli.</label>
                        </div>
                        <div class="option">
                            <input id="Food3" value="Food3" name="Food" checked="" type="radio" runat="server"/>
                            <label for="Food3">Moderate Fats: Tuna, lean mince.</label>
                        </div>
                        <div class="option">
                            <input id="Food4" value="Food4" name="Food" checked="" type="radio" runat="server"/>
                            <label for="Food4">High Fats: Avocado, nuts.</label>
                        </div>
                    </div>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="">
                    <asp:Button ID="Calculate" class="Calculate" runat="server" OnClick="Calculate_Click" Text="Calculate" />
                </div>
                 <br />
                 <div class="">
                    <asp:Label ID="WriteCalculation" class="CalculationLabel" runat="server" Text=""></asp:Label>
                 </div>
            </div>
        </div>

CSS:

body {
background-color: white;
//background-image: url("weightlift_rotator.jpg");
background-size: auto;
background-repeat: repeat;
margin-top: 100px;
margin-left: 400px;
margin-right: 400px;
margin-bottom: 50px;
border: 2px solid black;
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.heading {
background-color: white;
}

.line-separator{
height:1px;
background: #717171;
border-bottom:1px solid #313030;
margin-left: 15px;
margin-right: 15px;
}
html { 
background: url("weight2.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;
}

h2 {
font-family: Arial, Helvetica, sans-serif;
color: black;
text-align: center;
border-left: thin;
margin-top: 0px;
margin-bottom: 3px;
margin-left: 1px;
margin-right: 1px;
//border: 2px solid black;
 }

p {
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 18px;
text-align: center;
border-left: thin;
}


h4 {
//background-color: #4c4cff;
font-family: Arial, Helvetica, sans-serif;
color: black;
//text-align: center;
text-align: justify;
border-left: thin;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 1px;
margin-right: 1px;
//border: 2px solid black;
}

.Calculate {
background-color: #4c4cff;
color: white;
border: 2px solid black;
border-radius: 2px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 0.4s;
}

.Calculate:hover {
background-color: white;
color: black;
text-align: center;
//display: inline;
}

.CalculationLabel {
/*background-color: #8aacb8;*/
font-family: Arial, Helvetica, sans-serif;
color: black;
text-align: justify;
border-left: thin;
margin-top: 0px;
margin-bottom: 3px;

.option {
//background-color: #4c4cff;
color: black;
//border: 1px solid black;
//border-radius: 2px;
/*padding: 15px 32px;*/
text-align: justify;
text-decoration: none;
/*display: inline-block;*/
font-size: 17px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 0.4s
}

.option:checked {
background-color: white;
color: black;  
}

Answer 1

尝试从目标的低端开始列大小，随着系统像这样扩展:

col-xs-* col-sm-* col-lg-* col-xl-*

这是一个很好的table on bootstrap