如何在 bootstrap 中写一段结束 table 的段落?
How can I write a paragraph wrapping up a table in bootstrap?
我无法写一个段落来包裹右边的 table。 table 随着段落的扩展而扩展。
我正在复制 Apj Abdul Kalam 的维基百科页面格式。另外,我们可以减少 table 中的列宽吗?
这是我的代码笔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>
Bootstrap .col-{…}
是不环绕或浮动的结构。顾名思义,它们是列。
另一方面,floating elements can be wrapped around by text and inline elements. A floating element is one where the value of the float
css property is not none. Bootstrap 4 also has a set of shorthand classes for Float。
下面的示例使用 .float-right
class 将 table 推到右边。此外,将 table 的标记移动到标题之后也很重要。要更改 table 部分的宽度,您仍然可以使用 .col-{}
classes。 (它们只设置了元素的 width
和 flex
属性,如果没有 flex 容器,flex 就没有效果。)要设置宽度,另一种选择是使用 Sizing classes,但不幸的是,那些不使用媒体断点。
<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"/>
我无法写一个段落来包裹右边的 table。 table 随着段落的扩展而扩展。
我正在复制 Apj Abdul Kalam 的维基百科页面格式。另外,我们可以减少 table 中的列宽吗?
这是我的代码笔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>
Bootstrap .col-{…}
是不环绕或浮动的结构。顾名思义,它们是列。
另一方面,floating elements can be wrapped around by text and inline elements. A floating element is one where the value of the float
css property is not none. Bootstrap 4 also has a set of shorthand classes for Float。
下面的示例使用 .float-right
class 将 table 推到右边。此外,将 table 的标记移动到标题之后也很重要。要更改 table 部分的宽度,您仍然可以使用 .col-{}
classes。 (它们只设置了元素的 width
和 flex
属性,如果没有 flex 容器,flex 就没有效果。)要设置宽度,另一种选择是使用 Sizing classes,但不幸的是,那些不使用媒体断点。
<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"/>