Question

我正在使用Bootstrap来制作我的网页样式。

我想做一些类似于这张图片的事情：

我一直在尝试它（在剪辑中你可以测试它），但我不知道这是否是最好的方法。

我的意思是我不确定是否正确添加两个没有任何数据的div（col-xs-2），只是为了添加一些空格（bootstrap列）左边和右边。

有更好的方法吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="container-fluid" style="background-color:white;>
     <div class="row" >
       <div class="col-xs-12">WEB LOGO------------------------</div> 
       <div class="row"> 
          <div class="col-xs-2" style="background-color:white;"></div>
          <div class="col-xs-8" style="background-color:grey;">YES</div>
          <div class="col-xs-2" style="background-color:white;"></div>
       </div>
       <span> more content here -------------</span>
     </div>
  </div> 

</body>
</html>

Answer 1

您可以使用offset：

代替空div

<div class="col-xs-8 col-xs-offset-2" style="background-color:grey;">YES</div>

这会将元素2列向右移动。

Answer 2

您需要在父级div中实现style="inline-block"，希望子级内联。

引导程序和嵌套行

2 个答案: