Table of Contents
Reply to the discussion (solution)
Home Web Front-end HTML Tutorial By the way, has anyone used bootstrap2.0? A question about tabs??_html/css_WEB-ITnose

By the way, has anyone used bootstrap2.0? A question about tabs??_html/css_WEB-ITnose

Jun 24, 2016 pm 12:02 PM
tab

In other words, if the tab style is tabs-left, then the tabs will be arranged in a vertical column on the left.
At the same time, the content in the tab is on the right. .

But when there is too much content in the tab, the text in the tab becomes misaligned. . . It no longer aligns with the original text above, but runs below the tab. .

It looks like this:

I wonder if everyone can see the pictures in the upload space? If you can’t see it, please click here: http://hi.csdn.net/space-3277229-do-album-picid-1056573-goto-down.html

Could you please tell me how to change it so that the tab The content is placed in the normal position? Thank you very much! ! ! !


Reply to the discussion (solution)

<div class="tabbable tabs-left">  <ul class="nav nav-tabs">    <!--一大串li略去-->  </ul>  <div class="tab-content">    <div class="tab-pane" id="lB">            <p>这个div里面的东西要用p标签或者div标签框起来</p>     </div>    ......此处重复上个div  </div></div>
Copy after login


The code I tested did not have the above problems, remember that inside the div Things need to be framed with a div or p

It’s not easy to use even adding div and p? ?. . T T. .


HTML code


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Solve the problem that CentOS7's Tab key cannot complete commands Solve the problem that CentOS7's Tab key cannot complete commands Jan 17, 2024 pm 01:30 PM

Today I was doing an experiment on centOS and found that the customary tab key completion method used under Ubuntu could not be used. So I was very curious. After searching for information and testing it myself, I recorded the possible solutions as follows: 1) First, you need to Run the following command in the terminal: #yuminstallbash-completion//You can also use wildcard installation: yuminstallbash-c* or you can install some initialization package groups yum-ygroupinstallBaseCompatibilitylibrariesDebuggingToolsDial-upNetworkingsupppo

How to implement tab components and multi-tab pages in Vue? How to implement tab components and multi-tab pages in Vue? Jun 25, 2023 am 09:33 AM

With the continuous updating of front-end technology, Vue, as a popular front-end framework, has become the first choice of many developers. In actual projects, it is often necessary to use tab components and multi-tab pages to switch and manage different functional modules. In this article, we will introduce how to use Vue to implement a simple tab component and multi-tab page. 1. Implement a simple tab component. Create a Tab.vue component. Create a Tab.vue component in the project to display it.

What are the three ways to implement tab in Vue? What are the three ways to implement tab in Vue? Jan 29, 2023 pm 02:49 PM

There are three ways to implement tabs in Vue: 1. Control tab content switching through "v-show"; 2. Implement tab switching through the is feature and "keep-alive" cache in Vue; 3. Implement route switching through "router-link" .

Why can't alt+tab switch interfaces? Why can't alt+tab switch interfaces? Mar 09, 2023 pm 02:11 PM

The reason why alt+tab cannot switch the interface is that this command is disabled. The solution: 1. Turn on the computer, click the start menu, and select the run command; 2. Enter "regedit" in the blank bar to the right of the start, and click OK; 3. Enter the Registry Manager and find the "AltTabSettings" option; 4. Double-click "AltTabSettings", modify the value data in the opened option to "00000001", and click "Confirm".

RedMagic Gaming Tablet Pro launches as first tab with Snapdragon 8 Gen 3 Leading Version RedMagic Gaming Tablet Pro launches as first tab with Snapdragon 8 Gen 3 Leading Version Sep 05, 2024 pm 09:30 PM

RedMagic has fully unveiled the Gaming Tablet Pro, the first tab to feature the Snapdragon 8 Gen 3 Leading Version. It’s basically the overclocked version of the standard SoC, and the RedMagic 9S Pro leads benchmarks with it. The same is true for thi

RedMagic reveals more specs of its new gaming tablet RedMagic reveals more specs of its new gaming tablet Sep 01, 2024 am 06:34 AM

The second RedMagic gaming tablet will be fully unveiled on September 5. A recent benchmark run on AnTuTu revealed that it will feature the Snapdragon 8 Gen 3 Leading Version, making it as capable as the company’s latest Android smartphone, the 9S Pr

Deal | Lenovo Tab P12 Android tablet with large 3K display gets enticing 29% price cut Deal | Lenovo Tab P12 Android tablet with large 3K display gets enticing 29% price cut Aug 15, 2024 am 06:44 AM

Many travelers who are looking forward to their summer vacation are probably asking themselves how to kill some time on a long train ride or international flight, and a cheap multimedia tablet such as the Lenovo Tab P12 might solve this issue. Conseq

Xiaomi reveals launch date of new Poco Pad with 5G connectivity Xiaomi reveals launch date of new Poco Pad with 5G connectivity Aug 17, 2024 am 06:32 AM

Xiaomi has announced a new Android tablet that will launch under the Poco branding. It's called the Poco Pad 5G, and the tab is set to launch in India on August 23. The first-ever table that launched under the Poco brand was revealed in Mayof this ye

See all articles