Question

https://jsfiddle.net/dhaileytaha/ghuj4jL8/7/ 如上面的小提琴我需要左侧的p标签和右侧的模板在同一级别

 <p>abcdefg</p>
 <!-- Offers List - START -->
  <div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <div class="listing listing-default">
            <div class="shape">
                <div class="shape-text">buy</div>
            </div>
            <div class="listing-content">
                <h3 class="lead">Standard listing</h3>
                <p>Buy items on normal prices. No discounts available for this listing.</p>
            </div>
        </div>
      </div>
    </div>
  </div>
<p>uvwzyx</p>

Answer 1

基本总是

<div class="row">
    <div class="col-...">column1</div>
    <div class="col-...">column2</div>
    ...
</div>

12列代表整个宽度。

Bootstrap grid

该示例有三列：

<div class="row">
    <div class="col-xs-2 col-sm-2 col-md2">
      <p>abcdefg</p>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-4 col-lg-4">
        <div class="listing listing-default">
            <div class="shape">
                <div class="shape-text">buy</div>
            </div>
            <div class="listing-content">
                <h3 class="lead">Standard listing</h3>
                <p>Buy items on normal prices. No discounts available for this listing.</p>
            </div>
        </div>
    </div>
    <div class="col-xs-2 col-sm-2 col-md2">
      <p>uvwzyx</p>
    </div>
</div>

JSFiddle

模板和p标签在同一行

1 个答案: