Question

我一直在尝试调整列类，以使标题为Facts At a Glance的面板显示在行内容类的右侧，标题为History。

以下是代码段。

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="col-xs-12 col-sm-4">
          <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Facts At a Glance</h3>
                    </div>
                    <div class="panel-body">
                        <dl class="dl-horizontal">
                            <dt>Started</dt>
                            <dd>3 Feb. 2013</dd>
                            <dt>Major Stake Holder</dt>
                            <dd>HK Fine Foods Inc.</dd>
                            <dt>Last Year's Turnover</dt>
                            <dd>$1,250,375</dd>
                            <dt>Employees</dt>
                            <dd>40</dd>
                       </dl>
                    </div>
                </div>
        </div>
        <div class="row row-content">
            <div class="col-xs-12 col-sm-4 col-lg-8">
                <h2>Our History</h2>
                <p>Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong.  Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.</p>
                <p>The restaurant traces its humble beginnings to <em>The Frying Pan</em>, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan.</p>
            </div>
            <div>
                <p style="padding:20px;"></p>
            </div>
        </div>

＆＃13;

Answer 1

右栏中的div出现故障！指定列宽的div必须是最外层的父元素。

尝试从

更改

<div class="row row-content"> <div class="col-xs-12 col-sm-4 col-lg-8">

到

<div class="col-xs-12 col-sm-4 col-lg-8"> <div class="row row-content">

生成的HTML如下，

＆＃13;

  <div class="col-xs-12 col-sm-4 col-lg-8">
    <div class="row row-content">
      <h2>Our History</h2>
      <p>Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong
        Kong. Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.</p>
      <p>The restaurant traces its humble beginnings to <em>The Frying Pan</em>, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan.</p>
    </div>
    <div>
      <p style="padding:20px;"></p>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Facts At a Glance</h3>
      </div>
      <div class="panel-body">
        <dl class="dl-horizontal">
          <dt>Started</dt>
          <dd>3 Feb. 2013</dd>
          <dt>Major Stake Holder</dt>
          <dd>HK Fine Foods Inc.</dd>
          <dt>Last Year's Turnover</dt>
          <dd>$1,250,375</dd>
          <dt>Employees</dt>
          <dd>40</dd>
        </dl>
      </div>
    </div>
  </div>

＆＃13;

如何使Bootstrap面板出现在行内容类的右侧？

1 个答案: