Question

我尝试使用bootstrap创建一个弹出窗口。我从模板中修改了一些代码。它应该有3列。第1列图片，第2列文本和第3列是价格和按钮+图标。这将是一个包含几个相似行的列表。在这里，我只想把一行简单化。页脚将成为一些文本。问题是我无法将第3列放到正确的位置。我尝试过clearfix等等。有什么建议吗？

请注意，这些代码有几个未解决的问题。请忽略这些事情。这不是第一要务。请事先提前。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#myModal").modal('show');
	});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Wish List</h4>

            </div>
            <div class="modal-body">

                <div class="col-lg-3 col-md-4 col-xs-4 ">
                    <a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
                    </a>
                </div>
                <div "col-lg-3 col-md-4 col-xs-4 clearfix">
                
                    <p ><a href="#">Product Title</a></p>
                    <p class="text-warning"><small>Description.dfdasfjsadfdasldfdslafjlsadfsldfjsdljf</small></p>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-4 clearfix" >
                    <p>price$6.99</p>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
                     <span class="glyphicon glyphicon-trash"></span>
                </div>
                
            </div>
            <div class="modal-footer">
                <span> view of 1-5 of </span>
                <select>
                      <option value="5">5</option>
                      <option value="5">10</option>
                      
                </select>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Answer 1

你必须添加＆＃39;行＆＃39; ，忘记了一个＆＃39; class =＆＃39; ，您可以删除clearfix

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#myModal").modal('show');
	});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Wish List</h4>

            </div>
            <div class="modal-body">
<div class="row">
                <div class="col-lg-3 col-md-4 col-xs-4 ">
                    <a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-4 clearfix">
                
                    <p ><a href="#">Product Title</a></p>
                    <p class="text-warning"><small>Description.dfdasf jsadfdasld fdslafjlsadf sldfjsdljf</small></p>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-4 clearfix" >
                    <p>price$6.99</p>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
                     <span class="glyphicon glyphicon-trash"></span>
                </div>
                
            </div>
         </div>     
            <div class="modal-footer">
                <span> view of 1-5 of </span>
                <select>
                      <option value="5">5</option>
                      <option value="5">10</option>
                      
                </select>
            </div>
        </div>
    </div>
</div>
</body>
</html>

＆＃13;

Answer 2

主要是下面的第1号，但这里还有几个需要考虑的事项：

您在第二列的标记中遗漏了关键字class。这非常重要。
你真的不需要clearfix课程。如果你将整个事物包裹在一个row div中，那么它将很好地为你打破这一行。
列应该总是加起来为12 - 当你有三个col-lg-3时，你最终会得到左对齐的东西，只占模态的3/4。
较小屏幕尺寸的列将会升级到下一个屏幕，因此col-xs-4 col-sm-4 col-md-4 col-lg-3与col-xs-4 col-lg-3相同。需要对同一结果应用的CSS规则越少越好。
在您的示例中，您在描述中有一个非常长的单词，这会导致它溢出到下一列。您可能希望通过使用word-wrap和text-overflow等内容来解决这种情况。

＆＃13;

    $(document).ready(function() {
      $("#myModal").modal('show');
    });

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Bootstrap Modals</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
  <div id="myModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Wish List</h4>

        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-xs-4">
              <a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
              </a>
            </div>
            <div class="col-xs-4">
              <p><a href="#">Product Title</a>
              </p>
              <p class="text-warning"><small>Description.dfdasfjsadfdasldfdslafjlsadfsldfjsdljf</small>
              </p>
            </div>
            <div class="col-xs-4">
              <p>price$6.99</p>
              <button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
              <span class="glyphicon glyphicon-trash"></span>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <span> view of 1-5 of </span>
          <select>
            <option value="5">5</option>
            <option value="5">10</option>

          </select>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Bootstrap弹出窗口3列

2 个答案: