Question

我无法使用自举网格代码将工作测试放在选择自行车的左侧。而是测试在上面的行中选择你的自行车。谁能告诉我为什么会这样？

HTML

 <!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">

<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
    <div class="container">
    <div class='row'>
    <div class='col-md-12'>

        <i class="fa fa-bicycle" aria-hidden="true"><span>&nbsp;{{"Andy's Bike Shop"}}</span></i>
</div>
</div>
    </div><!--Header Container-->
    </div>
<div class="bikeSelector">
        <div class="container">
    <div class='row'>
    <div class="col-md-3">test</div>
    <div class='col-offset-3 col-md-6'>

Choose your bicycle
</div>

</div>
</div>
</div>


<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

Answer 1

试试：

<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
    <div class="container">
    <div class='row'>
    <div class='col-md-12'>

        <i class="fa fa-bicycle" aria-hidden="true"><span>&nbsp;{{"Andy's Bike Shop"}}</span></i>
</div>
</div>
    </div><!--Header Container-->
    </div>
<div class="bikeSelector">
        <div class="container">
    <div class='row'>
    <div class="col-md-3">test</div>
    <div class='col-offset-3 col-md-6'>

Choose your bicycle
</div>

</div>
</div>
</div>


<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

Answer 2

那是因为您要将文字包裹在div中; Divs默认显示为块元素。您需要将它们包装在内联元素（p，span）中，或者将这些div设为display: inline-block或display: inline

示例：

<div class="bikeSelector"> <div class="container"> <div class='row'> <p class="col-md-3">test</p> <p class='col-offset-3 col-md-6'> Choose your bicycle </p> </div> </div> </div>

或在CSS中：

.bikeSelector .row > div {display: inline-block}

Bootstrap网格将文本放在彼此之上而不是旁边

2 个答案: