在页面上以全宽显示 div 时出现问题

Question

I am trying to display divs side by side on a page. However, if there is only one col-md-6 div class on the page, then I am trying to display it full width(100%) rather than 50%. Currently it's using only 50% even if there is only one col-md-6 . Is there a way to do this using CSS? Here is the my HTML and CSS:

   <div class="col-md-6 textcontent">
   </div>

   <div class="col-md-6 service">
   </div>

   <div class="col-md-6 textcontent">
   </div>

CSS

.col-md-6{
width50%;
}

Answer 1

Flexbox is the way to go here. Here is an example:

 .wrap { display: flex; flex-direction: row; justify-content: space-evenly; margin-bottom: 2rem; }.item { flex-grow: 1; /* For display purposes */ padding: 1rem; }.pink { background-color: pink; }.blue { background-color: lightblue; }.green { background-color: lightgreen; }.orange { background-color: coral; }

 <section class="wrap"> <div class="item pink"> Content 1 </div> <div class="item blue"> Content 2 </div> <div class="item green"> Content 3 </div> </section> <section class="wrap"> <div class="item orange"> Content Solo </div> </section>

https://jsfiddle.net/willihyde/aqrs410u/1/

Answer 2

If you are using the bootstrap, You can use the col-md-12 class to add a full width column. bootstrap grid system is coming as a fraction system and your number will be divide by 12. So if we divide the 6 by 12 the answer is 0.5 and that means 50%. That's why it's adding a 50% width column. So when we add 12 it will divide by 12/12 and the width will be 100%. You can follow the Bootstrap grid system guideline to learn more about the various width ratios and how to make a responsive grid.

<div class="col-md-12 service"></div>

If you are trying to build this by yourself, Define another class with a name and add the width: 100%;

.col-md-12{
   width:100%;
}

Then add that class name to your html class attribute

<div class="col-md-12 service"></div>