是否可以在引导列中仅对齐一个div?

时间:2017-11-21 09:45:37

标签: html css twitter-bootstrap

我想要一个div display: inline。当然,2个col-md-6部分没有问题,但如果我只想用一个部分做什么呢?有办法吗?



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="margin:0;padding:0;">
	<div class="row">
		<div class="col-md-6">
			<article <?php post_class('list-item'); ?>>
				<div class="list-item">
					<div class="list-img">
						<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php if (has_post_thumbnail()) { the_post_thumbnail(); } else { echo '<img src="' . get_template_directory_uri() . '/images/placeholder-content-list.jpg' . '" alt="No Picture" />'; } ?></a>
					</div>
					<div class="desc-list">
						<header class="list-header">
							<?php mh_newsdesk_lite_post_meta(); ?>
							<h3 class="list-title"><a href="<?php echo get_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
						</header>
						<div class="list-excerpt">
							<?php the_excerpt(); ?>
						</div>
					</div>
				</div>
			</article>
		</div>
	</div>
</div>
&#13;
&#13;
&#13;

由于

3 个答案:

答案 0 :(得分:0)

使用这样的东西。使用偏移。

<div class="container-fluid">
 <div class="row">
  <div class="col-md-offset-3"></div>
  <div class="col-md-6">
   <p>Text Text Text</p>
  </div>
  <div class="col-md-offset-3"></div>
 </div>
</div>

    <div class="container-fluid">
     <div class="row">
      <div class="col-md-offset-3"></div>
      <div class="col-md-6">
       <p>Text Text Text</p>
      </div>
     </div>
    </div>

    <div class="container-fluid">
     <div class="row">
      <div class="col-md-offset-6"></div>
      <div class="col-md-6">
       <p>Text Text Text</p>
      </div>
     </div>
    </div>

如果我理解你的话?

答案 1 :(得分:0)

使用offset类,它会在元素的左侧和右侧创建空格。

另请看这个链接 Bootstrap column aligning

答案 2 :(得分:0)

你应该使用偏移类。像这样

 <div class="container-fluid">
 <div class="row">
  <div class="col-md-6 col-md-offset-3">
   <p>This is testing text</p>
  </div>
 </div>
</div>

在Bootstrap页面https://getbootstrap.com/docs/3.3/css/#grid-options

上找出网格系统