Question

我想在标题下方的主页上有两列：一个在左边显示社交媒体（工作正常），一个在右边显示一点点欢迎的模糊。我正在使用偏移列，但它仍然存在差距。如果我将偏移增加到4以达到网格的总数12，则模糊向下移动，就像它超过12一样。我不确定我在这里丢失了什么。

这是我第一次在stackoverflow上发帖，所以希望我能为这个问题提供足够的代码。如果没有，请告诉我。谢谢！

# Convert X Y position to MAP file index
def index_from_xy(x, y):
  return (y - 16) << 16 | (x & 65535)

Answer 1

确保使用正确的窗口大小类：

Class prefix    .col-xs-    .col-sm-    .col-md-    .col-lg-
# of columns    12
Column width    Auto    ~62px   ~81px   ~97px

http://getbootstrap.com/css/#grid-options

您也可以使用偏移量来完成您未使用的其余列。

就像下面的例子一样。

我需要使用.col-xs前缀来满足代码段的窗口大小。

你也可以强迫＆＃34;一个div在文档中向右或向左浮动。你需要阅读这个： http://www.w3schools.com/css/css_float.asp

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid">	
		<section class="social-media col-xs-4">
			<h3>To Stay Connected</h3>
			<div class="row">
				<div class="col-lg-2 col-md-2 col-sm-2">
					<a href="https://www.instagram.com/neon.honey/" target="_blank"><img class="media-object" src="../bootstrap/images/instagram.png" alt="Instagram"></a>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6">
					neon.honey
				</div>
			</div>	
			<div class="row">	
				<div class="col-lg-2 col-md-2 col-sm-2">				
					<a href="https://twitter.com/deephoney/" target="_blank"><img class="media-object" src="../bootstrap/images/twitter.png" alt="Twitter"></a>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6">
					@deephoney
				</div>
			</div>
			<div class="row">
				<div class="col-lg-2 col-md-2 col-sm-2">
					<a href="https://www.facebook.com/all.neon.like/" target="_blank"><img class="media-object" src="../bootstrap/images/facebook.png" alt="Facebook"></a>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6">
					Molly
				</div>
			</div>
			<div class="row">
				<div class="col-lg-2 col-md-2 col-sm-2">
					<img class="media-object" src="../bootstrap/images/pinterest.png" alt="Pinterest" />
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6">
				Neon Honey
				</div>
			</div>
		</section>
		<section class="hello col-xs-4 col-xs-offset-4">
			<h1>hello!</h1> 
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, 
			cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit 
			commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
		</section>
</div>

＆＃13;

使用Bootstrap时，文本无法到达浏览器窗口的右侧

1 个答案: