Question

I am unable to write a paragraph wrapping the table on the right. The table just expands as the paragraph expands.

I am copying the Wikipedia page format of Apj Abdul Kalam. Also, can we reduce the width of the column in the table?

Here is my codepen link: https://codepen.io/TariqueBaig/pen/zRrKpx

<body>
  <div class="container">
    <h1 class="display-4 text-center">A.P.J. Abdul Kalam</h1>
    <h3 class="text-center font-weight-light">Missile man of India</h3>
    <div class="row">
      <!--       <div class="col-lg-1"></div> -->
      <div class="col-lg-8">
        <p><span class="font-weight-bold">Avul Pakir Jainulabdeen Abdul Kalam</span> better known as <span class="font-weight-bold">A.P.J.Abdul Kalam</span> was born in 15th October 1931.He was the 11th President of India from 2002-2007.He was born and raise
          in Rameshwaram, TamilNadu, and studied physics and aerospace engineering.He spent the next four decades as a scientist and science administrator, mainly at the Defence Research and Development Organisation (DRDO) and Indian Space Research Organisation
          (ISRO) and was intimately involved in India's civilian space programme and military missile development efforts.He thus came to be known as the <span class="font-italic">Missile Man of India</span> for his work on the development of ballistic
          missile and launch vehicle technology.He also played a pivotal organisational, technical, and political role in India's Pokhran-II nuclear tests in 1998, the first since the original nuclear test by India in 1974.</p>
        <p>Kalam was elected as the 11th President of India in 2002 with the support of both the ruling Bharatiya Janata Party and the then-opposition Indian National Congress. Widely referred to as the "People's President," he returned to his civilian life
          of education, writing and public service after a single term. He was a recipient of several prestigious awards, including the Bharat Ratna, India's highest civilian honour.</p>
        <p>While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on 27 July 2015, aged 83. Thousands including national-level dignitaries attended the funeral ceremony held in
          his hometown of Rameshwaram, where he was buried with full state honours.</p>
      </div>
      <div class="col-lg-4 border border-secondary">
        <figure class="figure">
          <img class="figure-img img-fluid img-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/A._P._J._Abdul_Kalam_in_2008.jpg" alt="Image of Abdul Kalam">
          <figcaption class="figure-caption text-center">Kalam in 2008</figcaption>
        </figure>
        <h6 class="text-center bg-primary text-white">11th President of India</h6>
        <p class="text-center font-weight-bold">In office<br><span class="font-weight-normal">25 July 2002 - 25 July</span></p>
        <table class="table">
          <thead>
          </thead>
          <tbody>
            <tr>
              <th scope="row">Prime Minister</th>
              <td>Atal bihari Vajpayee<br>Manmohan Singh</td>
            </tr>
            <tr>
              <th scope "row">Vice President</th>
              <td>Krishan Kant<br>Bhairon Singh Shekhawat</td>
            </tr>
            <tr>
              <th scope="row">Preceded By</th>
              <td>K.R.Narayanan</td>
            </tr>
            <tr>
              <th scope="row">Succeeded By</th>
              <td>Pratibha Patil</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="row">
        <div>
          Avul Pakir Jainulabdeen Abdul Kalam was born on 15 October 1931 to a Tamil Muslim family in the pilgrimage centre of Rameswaram on Pamban Island, then in the Madras Presidency and now in the State of Tamil Nadu. His father Jainulabdeen was a boat owner
          and imam of a local mosque
        </div>
      </div>
    </div>
  </div>
</body>

Answer 1

Bootstrap .col-{…}是不会换行或相互浮动的结构。正如他们的名字一样，它们是专栏。

另一方面，floating elements可以由文本和内联元素包围。浮动元素是float css属性的值不是none的元素。 Bootstrap 4还有一组Float的速记类。

以下示例使用.float-right类将表推向右侧。此外，在标题之后立即移动表的标记也很重要。要更改表部分的宽度，您仍然可以使用.col-{}类。（它们只设置元素的width和flex属性，没有flex容器，flex就没有效果。）要设置宽度，另一个选项是使用{{{但不幸的是，那些不使用媒体断点的类。

＆＃13;

<div class="container">
    <h1 class="display-4 text-center">A.P.J. Abdul Kalam</h1>
    <h3 class="text-center font-weight-light">Missile man of India</h3>

    <!-- New position of the "table" -->
    <div class="col-lg-3 float-right border border-secondary">
        <figure class="figure">
            <img class="figure-img img-fluid img-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/A._P._J._Abdul_Kalam_in_2008.jpg" alt="Image of Abdul Kalam">
            <figcaption class="figure-caption text-center">Kalam in 2008</figcaption>
        </figure>
        <h6 class="text-center bg-primary text-white">11th President of India</h6>
        <p class="text-center font-weight-bold">In office<br><span class="font-weight-normal">25 July 2002 - 25 July</span></p>
        <table class="table">
            <thead>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Prime Minister</th>
                    <td>Atal bihari Vajpayee<br>Manmohan Singh</td>
                </tr>
                <tr>
                    <th scope "row">Vice President</th>
                    <td>Krishan Kant<br>Bhairon Singh Shekhawat</td>
                </tr>
                <tr>
                    <th scope="row">Preceded By</th>
                    <td>K.R.Narayanan</td>
                </tr>
                <tr>
                    <th scope="row">Succeeded By</th>
                    <td>Pratibha Patil</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--
    Long-text description comes here.
    This wrapping <div> can also be omitted.
    -->
    <div class="this-div-could-also-be-deleted">
        <p><span class="font-weight-bold">Avul Pakir Jainulabdeen Abdul Kalam</span> better known as <span class="font-weight-bold">A.P.J.Abdul Kalam</span> was born in 15th October 1931.He was the 11th President of India from 2002-2007.He was born and raise in Rameshwaram, TamilNadu, and studied physics and aerospace engineering.He spent the next four decades as a scientist and science administrator, mainly at the Defence Research and Development Organisation (DRDO) and Indian Space Research Organisation (ISRO) and was intimately involved in India's civilian space programme and military missile development efforts.He thus came to be known as the <span class="font-italic">Missile Man of India</span> for his work on the development of ballistic missile and launch vehicle technology.He also played a pivotal organisational, technical, and political role in India's Pokhran-II nuclear tests in 1998, the first since the original nuclear test by India in 1974.</p>
        <p>Kalam was elected as the 11th President of India in 2002 with the support of both the ruling Bharatiya Janata Party and the then-opposition Indian National Congress. Widely referred to as the "People's President," he returned to his civilian life of education, writing and public service after a single term. He was a recipient of several prestigious awards, including the Bharat Ratna, India's highest civilian honour.</p>
        <p>While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on 27 July 2015, aged 83. Thousands including national-level dignitaries attended the funeral ceremony held in his hometown of Rameshwaram, where he was buried with full state honours.</p>
        
        <div>
            Avul Pakir Jainulabdeen Abdul Kalam was born on 15 October 1931 to a Tamil Muslim family in the pilgrimage centre of Rameswaram on Pamban Island, then in the Madras Presidency and now in the State of Tamil Nadu. His father Jainulabdeen was a boat owner and imam of a local mosque
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

＆＃13;

How can I write a paragraph wrapping up a table in bootstrap?

1 个答案: